improve mobile styling

docs/src/components/PageNavigation/style.scss

@@ -1,7 +1,7 @@
 .page-navigation {
   display: flex;
   justify-content: space-between;
-  padding: 2rem 0;
+  padding: 1.5rem 0;
 
   &__link {
     color: rgba($colorWhite, 0.6);

docs/src/layouts/App/style.scss

@@ -1,4 +1,5 @@
 $navHeight: 4.5rem;
+$mobileBreakPoint: 600px;
 $menuBreakPoint: 800px;
 
 .app {
@@ -36,6 +37,7 @@ $menuBreakPoint: 800px;
     font: inherit;
     color: $colorWhite;
     padding: 0.5rem 0.75rem;
+    -webkit-appearance: none;
   }
 
   &__sidebar {
@@ -73,6 +75,10 @@ $menuBreakPoint: 800px;
     backdrop-filter: blur(10px);
     max-height: 100vh;
 
+    @media (min-width: $menuBreakPoint) {
+      padding: 1.5rem 0;
+    }
+
     &::after {
       content: '';
       z-index: -1;
@@ -117,12 +123,20 @@ $menuBreakPoint: 800px;
   &__inner {
     margin: 0 auto;
     max-width: 50rem;
+    padding: 0 1rem;
+
+    @media (min-width: $mobileBreakPoint) {
       padding: 0 2rem;
     }
+  }
 
   &__link-group {
+    margin-bottom: 1rem;
+
+    @media (min-width: $mobileBreakPoint) {
       margin-bottom: 2rem;
     }
+  }
 
   &__link-group-title {
     font-weight: 700;
@@ -152,6 +166,7 @@ $menuBreakPoint: 800px;
     border-radius: 5px;
     font-size: 0.85rem;
     margin-left: -0.5rem;
+    white-space: nowrap;
 
     &:hover {
       color: $colorWhite;
@@ -173,19 +188,27 @@ $menuBreakPoint: 800px;
   }
 
   &__main {
+    padding: 1rem 0;
+
+    @media (min-width: $mobileBreakPoint) {
       padding: 2rem 0;
     }
+  }
 
   &__page-navigation {
     border-top: 1px solid rgba($colorWhite, 0.1);
   }
 
   &__mobile-nav {
-    padding: 1rem 2rem;
+    padding: 1rem;
     flex: 1 1 auto;
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
+
+    @media (min-width: $mobileBreakPoint) {
+      padding: 2rem;
+    }
   }
 }