diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
index 8a67fc98f..ec3ec746f 100644
--- a/ui/src/styles/base.css
+++ b/ui/src/styles/base.css
@@ -197,15 +197,6 @@ body {
   overflow: hidden;
 }
 
-/* iOS safe area support */
-@supports (padding: env(safe-area-inset-top)) {
-  body {
-    padding-top: env(safe-area-inset-top);
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
-  }
-}
-
 body {
   margin: 0;
   font: 400 14px/1.55 var(--font-body);
diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css
index 7d97fe397..30cb473b7 100644
--- a/ui/src/styles/layout.mobile.css
+++ b/ui/src/styles/layout.mobile.css
@@ -4,6 +4,17 @@
 
 /* Tablet: Horizontal nav - sticky header */
 @media (max-width: 1100px) {
+  /* iOS safe area support - apply to shell container */
+  @supports (padding: env(safe-area-inset-top)) {
+    .shell {
+      padding-top: env(safe-area-inset-top);
+      padding-left: env(safe-area-inset-left);
+      padding-right: env(safe-area-inset-right);
+      padding-bottom: env(safe-area-inset-bottom);
+      height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+    }
+  }
+
   /* Keep topbar sticky on mobile */
   .topbar {
     position: sticky;