From e8cfafc4da9b6670cc6560bbf509763ed3e63f8d Mon Sep 17 00:00:00 2001 From: "Austin S. Lin" Date: Thu, 29 Jan 2026 08:15:48 -0500 Subject: [PATCH] fix: move safe-area padding to shell container Addresses Codex review feedback - applying safe-area padding to body while body has height:100% + overflow:hidden clips the bottom. Now applies safe-area insets to .shell container with adjusted height calc to prevent clipping. --- ui/src/styles/base.css | 9 --------- ui/src/styles/layout.mobile.css | 11 +++++++++++ 2 files changed, 11 insertions(+), 9 deletions(-) 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;