fix(ui): 💄 mobile styles

Author: jojobyte

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;

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);
   }

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;
+  }
+}