diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index 49b0d67..4348d57 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -909,11 +909,15 @@ body {
     .mobile-navigation {
         display: block;
         position: fixed;
-        height: var(--mobile-navigation-height);
         bottom: 0;
+        transform: translateY(calc(100% - var(--mobile-navigation-height)));
         left: var(--content-bounds-padding);
         right: var(--content-bounds-padding);
         z-index: 10;
+        background-color: var(--color-widget-background);
+        border: 1px solid var(--color-widget-content-border);
+        border-bottom: 0;
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
         transition: transform .3s;
     }
 
@@ -923,50 +927,23 @@ body {
         height: 2px;
     }
 
+    .mobile-navigation:has(.mobile-navigation-page-links-input:checked) {
+        transform: translateY(0);
+    }
+
     .mobile-navigation-page-links {
+        border-top: 1px solid var(--color-widget-content-border);
+        padding: 15px var(--content-bounds-padding);
         display: flex;
         align-items: center;
-        position: relative;
-        height: 100%;
-        background-color: var(--color-widget-background);
-        border: 1px solid transparent;
-        border-top: 0;
-        border-bottom: 0;
-        padding: 0 var(--content-bounds-padding);
         overflow-x: scroll;
         gap: 2.5rem;
-        transition: border-color 0s .2s, transform .3s;
-        z-index: 1;
-    }
-
-    .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-page-links {
-      border-color: var(--color-widget-content-border);
-      transition: transform .3s;
-    }
-
-    .mobile-navigation-page-links .nav-item {
-        line-height: var(--mobile-navigation-height);
     }
 
     .mobile-navigation-icons {
         display: flex;
         justify-content: space-around;
         align-items: center;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: var(--color-widget-background);
-        border: 1px solid var(--color-widget-content-border);
-        border-bottom-color: transparent;
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
-        transition: border .3s, border-radius .3s, transform .3s;
-        z-index: 2;
-    }
-
-    .mobile-navigation:has(.mobile-navigation-page-links-input:checked) .mobile-navigation-icons {
-      border-bottom-color: var(--color-widget-content-border);
-      border-radius: var(--border-radius) var(--border-radius) 0 0;
-      transform: translateY(-100%);
     }
 
     body:has(.mobile-navigation-input[value="0"]:checked) .page-columns > :nth-child(1),
@@ -978,12 +955,13 @@ body {
     .mobile-navigation-label {
         display: flex;
         flex: 1;
-        align-self: stretch;
         max-width: 50px;
+        height: var(--mobile-navigation-height);
         justify-content: center;
         align-items: center;
         cursor: pointer;
         font-size: 15px;
+        line-height: var(--mobile-navigation-height);
     }
 
     .mobile-navigation-pill {
@@ -1026,6 +1004,32 @@ body {
     }
 }
 
+@media (max-width: 1190px) and (display-mode: standalone) {
+    :root {
+        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
+    }
+
+    .mobile-navigation {
+        transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom)));
+        padding-bottom: var(--safe-area-inset-bottom);
+    }
+
+    .mobile-navigation-icons {
+        padding-bottom: var(--safe-area-inset-bottom);
+        transition: padding-bottom .3s;
+    }
+
+    .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
+        padding-bottom: 0;
+    }
+}
+
+@media (display-mode: standalone) {
+    body {
+        padding-top: env(safe-area-inset-top, 0);
+    }
+}
+
 @media (max-width: 550px) {
     :root {
         font-size: 9px;
@@ -1044,29 +1048,6 @@ body {
     }
 }
 
-@media (display-mode: standalone) {
-    body {
-        padding-top: env(safe-area-inset-top, 0);
-    }
-
-    .mobile-navigation {
-        bottom: env(safe-area-inset-bottom, 0);
-    }
-
-    .mobile-navigation::after {
-        content: '';
-        position: absolute;
-        background: var(--color-widget-background);
-        height: calc(var(--mobile-navigation-height) + env(safe-area-inset-bottom, 0));
-        top: 0;
-        left: 0;
-        right: 0;
-        border: 1px solid var(--color-widget-content-border);
-        border-bottom: 0;
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
-    }
-}
-
 .size-h1   { font-size: var(--font-size-h1); }
 .size-h2   { font-size: var(--font-size-h2); }
 .size-h3   { font-size: var(--font-size-h3); }