From ab34ae3674dabb9006661bac90b0c9d313c30ee8 Mon Sep 17 00:00:00 2001
From: jojobyte <184880+jojobyte@users.noreply.github.com>
Date: Sun, 7 Apr 2024 15:52:47 -0600
Subject: [PATCH] fix(ui): :lipstick: mobile styles

---
 src/index.css       |  2 +-
 src/styles/form.css | 12 +++++++-----
 src/styles/nav.css  | 12 ++++++++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/index.css b/src/index.css
index 22374d6..afa2fa0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,7 +20,7 @@ body {
 main {
   padding: 0;
   width: 100%;
-  max-width: 40rem;
+  max-width: 100vw;
   display: flex;
   flex-direction: column;
   justify-self: center;
diff --git a/src/styles/form.css b/src/styles/form.css
index c7739f9..3da1c71 100644
--- a/src/styles/form.css
+++ b/src/styles/form.css
@@ -271,6 +271,7 @@ form fieldset.share {
   align-items: center;
   flex: 1 1 auto;
   margin: 0;
+  padding: 0;
 }
 form fieldset.share aside {
   display: flex;
@@ -287,6 +288,8 @@ form fieldset.share aside input:read-only {
 }
 form fieldset.share section + aside {
   border-top: 1px solid var(--dark-600);
+  max-width: 98vw;
+  padding: 2rem 2rem 0;
 }
 form fieldset.share aside label {
   display: block;
@@ -754,14 +757,13 @@ form[name="network"] {
   }
   form fieldset.share {
     flex-direction: row;
-  }
-  form fieldset.share aside {
-    padding-left: 2rem;
-    padding-right: 1rem;
+    padding: 0 1rem;
   }
   form fieldset.share section + aside {
     max-width: 16rem;
-    /* max-width: 305px; */
+    padding: 0;
+    padding-left: 2rem;
+    padding-right: 1rem;
     border-top: 0 solid transparent;
     border-left: 1px solid var(--dark-600);
   }
diff --git a/src/styles/nav.css b/src/styles/nav.css
index 205acb4..909fd7d 100644
--- a/src/styles/nav.css
+++ b/src/styles/nav.css
@@ -109,7 +109,6 @@ nav .alias {
   font-weight: 400;
   line-height: 1;
   padding: 1rem;
-  margin-right: 1.25rem;
 }
 nav .alias span {
   padding: 1rem;
@@ -147,7 +146,7 @@ nav menu li a {
 nav menu menu {
   position: absolute;
   top: var(--nav-bound);
-  right: 2rem;
+  right: 1rem;
   flex-direction: column;
   flex: 1 1 auto;
   margin-top: -1rem;
@@ -168,3 +167,12 @@ nav .alias:hover + menu {
   opacity: 1;
   visibility: visible;
 }
+
+@media (min-width: 650px) {
+  nav .alias {
+    margin-right: 1.25rem;
+  }
+  nav menu menu {
+    right: 2rem;
+  }
+}
\ No newline at end of file