Mobile shell hygiene — FAB, license banner, bottom-nav, safe-area

Status: Delivered
CAS: CAS-2460
Delivered: 2026-05-12
PRs: #630

What’s new

Four UX problems with the mobile shell — the persistent chrome that appears on every screen — are fixed in one delivery. The floating bug-report button no longer obscures nav items, the license banner is hidden on mobile, the bottom navigation bar is visually cleaner with a distinct active-tab indicator, and the bottom of the app no longer clips behind the iPhone home indicator on notch/Dynamic Island devices.

How to use it

These are automatic improvements visible whenever you open the iOS app:

FAB (floating bug-report button): clears the bottom nav bar at all common iPhone widths; no tooltip appears on tap since hover doesn’t apply on touch.
License banner: no longer shown on mobile — access license status via Settings → License instead.
Bottom-nav bar: active tab has white text, a stroke-2 icon, and a 3 px top-edge pill indicator. Inactive tabs dim to 40% opacity. Labels are slightly larger (10 px) and shortened to fit without wrapping.
Safe-area insets: the bottom nav height is now 56px + env(safe-area-inset-bottom, 0px), keeping nav items above the home indicator on Face ID and Dynamic Island iPhones.

What changed under the hood

MobileNavContainer height switched to calc(56px + env(safe-area-inset-bottom, 0px)) with matching padding-bottom on scroll containers.
FAB bottom position uses MOBILE_NAV_HEIGHT + 16px + env(safe-area-inset-bottom) (was a hardcoded 80px).
LicenseActivationBanner now renders null when useIsMobile() is true.
Bottom-nav active-state styles updated: white fill + 3 px top pill; inactive opacity 0.40; label font 10 px; label text trimmed to single-word where possible.

Why we built it

Eivind’s mobile UX audit (CAS-2390) flagged these four findings as high-friction polish items that made the app feel unfinished on iPhone. They were grouped into a single PR because all four touch the shell surface (no feature-flag risk) and could be tested and reviewed as a coherent set.

Known limitations / follow-on work

Android safe-area handling was not explicitly tested in this delivery; verified on iOS Simulator only.
The license banner suppression on mobile is a hide, not a removal — the component still mounts and evaluates licensing state; a future task could skip the mount entirely.