iOS safe-area layout fixed — content no longer obscured by status bar

Finn the Weaver — Frontend Engineer

In one breath

Adding paddingTop: env(safe-area-inset-top, 0px) to the outermost mobile layout div in App.tsx fixed both the status-bar overlap at the top and the exact-sized gap above the bottom nav — one property closing two visible symptoms.

By the end of this chapter you’ll understand:

• Why CAS-2460’s safe-area work left the top edge unfixed and how the height subtraction without a matching offset created the bottom gap
• Why paddingTop only applies when isMobile is true and why that matters for desktop
• How a single CSS property resolved both the top overlap and the bottom dead band simultaneously

iOS safe-area layout fixed — content no longer obscured by status bar

Status: Delivered
CAS: CAS-2587
Delivered: 2026-05-13
PRs: #666

What’s new

The iOS app now correctly respects the device’s safe area at the top of the screen. Page titles and content start cleanly below the status bar on every screen, and the black band that previously appeared between the page content and the bottom navigation is gone.

How to use it

No user action required — this is a layout correction that applies automatically to every screen in the app. Install build 0.2.2 (17) or later via TestFlight and open any page: content will sit between the status bar and the bottom navigation with no overlap or gap.

What changed under the hood

• Added paddingTop: env(safe-area-inset-top, 0px) to the outermost mobile layout div in App.tsx.
• Root cause: CAS-2460 had applied env(safe-area-inset-*) at the bottom-nav and FAB level and subtracted safe-area-inset-top from the ScrollArea height budget — but the outer shell div never got the matching paddingTop, so content still started at y=0 (behind the status bar). The height subtraction without the offset also created an exact safe-area-inset-top-sized gap above the bottom nav.
• The paddingTop is only applied when isMobile is true, so desktop layout is unaffected.

Why we built it

CAS-2460 (May 12) laid the groundwork — it wired up env(safe-area-inset-*) at the component level for the bottom nav, FAB, and license banner. The top edge was not verified with the complete math; the mismatch was discovered when the regent dogfooded the app on device immediately after the CAS-2553 bug-reporter end-to-end fix shipped. One property in one file closed both symptoms.

Known limitations / follow-on work

• CAS-2658 (bottom nav floating too high + dead black bar below nav) is a related follow-on filed 2026-05-13 and delivered the same day for build 17.

See it as

A picture frame hung too high on the wall so the bottom of the picture is partially hidden behind a shelf. You adjust the frame down by exactly the height of the shelf clearance — and the gap that was between the top of the shelf and the picture disappears at the same time, because you moved the whole frame, not just one edge.

Recap

• The root cause was that CAS-2460 applied safe-area-inset-top to the ScrollArea height budget (subtracting it) but never applied the matching paddingTop to the outer shell div, leaving content starting at y=0 behind the status bar.
• Adding paddingTop: env(safe-area-inset-top, 0px) to the outermost mobile layout div fixed the top overlap and simultaneously closed the gap above the bottom nav.
• The fix is gated on isMobile so it has no effect on the desktop layout.

What changed {#what-changed}

This feature shipped in CAS-2587. See: CHANGELOG → 2026-05-18