diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index 36700b9..49b0d67 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -909,15 +909,11 @@ 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;
     }
 
@@ -927,23 +923,50 @@ 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),
@@ -955,13 +978,12 @@ 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 {
@@ -1023,11 +1045,26 @@ body {
 }
 
 @media (display-mode: standalone) {
-  @supports (-webkit-touch-callout: none) {
-    .mobile-navigation {
-      bottom: 15px;
+    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); }
diff --git a/internal/assets/templates/document.html b/internal/assets/templates/document.html
index dbc19e3..aa3aac2 100644
--- a/internal/assets/templates/document.html
+++ b/internal/assets/templates/document.html
@@ -5,7 +5,7 @@
     <title>{{ block "document-title" . }}{{ end }}</title>
     <meta charset="UTF-8">
     <meta name="color-scheme" content="dark">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">