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.