diff --git a/.planning/round-audit-mobile-deep.md b/.planning/round-audit-mobile-deep.md new file mode 100644 index 000000000..23eddc8ed --- /dev/null +++ b/.planning/round-audit-mobile-deep.md @@ -0,0 +1,380 @@ +# Mobile-Deep Audit — 2026-05-16 + +## Executive summary + +The mobile contract is largely solid where attention has been paid — +bottom-nav respects safe-area insets, dashboard tiles wrap correctly +at every breakpoint, and the `` primitive flips +between Sheet and Dialog by viewport. Five structural gaps remain. +The sticky `` ignores the iOS top safe-area inset, so PWA +installs on notched devices get the logo clipped under the status +bar. Five raw `` mounts (intake import, doctor report, +password change, app-log preview, side-effects) never went through +the v1.4.27 Sheet branch, so phone users land on a centred desktop +dialog instead of a bottom sheet. The Coach FAB at `bottom-20` +overlaps the bottom-nav once iPhone safe-area adds 34 px. Coach, +bug-report, and feedback textareas ship `text-sm` (14 px), which +triggers iOS Safari's zoom-on-focus quirk. Sonner is hardcoded +`theme="dark"` while the rest of the app supports light mode, and +its `bottom-right` position sits under the bottom-nav on phones. + +## Findings — prioritized + +### F-1: `` ignores the iOS top safe-area inset + +**Severity**: high +**Surface**: global +**Viewport**: `` and raise the inner row to `h-16` separately, OR +switch the page-shell `
` to a top padding that mirrors the +bottom-nav contract. Verify the maintainership banner above the bar +respects the same inset. +**Effort**: small `[hotfix-ready]` + +### F-2: Static `themeColor` doesn't track light mode + +**Severity**: high +**Surface**: global +**Viewport**: all (iOS Safari + Android Chrome) +**File(s)**: `src/app/layout.tsx:70`, `public/manifest.json:7-8` +**What's wrong**: Both surfaces hardcode `#282a36` (Dracula dark +background) as the theme-color. Light-mode users (Alucard palette, +`#f5f5f5` background) get a near-black Android address bar and an +iOS PWA status-bar background that doesn't match the page. The +theme toggle ships three modes (system / dark / light); the +chrome-colour signal never follows. +**Fix shape**: Replace the static `themeColor` with the Next 13+ +array form: `themeColor: [{ media: "(prefers-color-scheme: light)", +color: "#f5f5f5" }, { media: "(prefers-color-scheme: dark)", color: +"#282a36" }]`. Manifest can carry only one — keep the dark one as +the default but document the trade-off. Optionally write a tiny +client effect that updates `` when the user +flips themes manually. +**Effort**: trivial `[hotfix-ready]` + +### F-3: Five raw `` mounts skip the Sheet branch + +**Severity**: high +**Surface**: medications, settings, admin, global (doctor report) +**Viewport**: `` primitive was added in +v1.4.27 MB1 precisely so these surfaces would slide up from the +bottom on phones. Five mount sites still call `` + +`` directly, so on a 375 px viewport the user gets a +centred modal capped at `calc(100% - 2rem)` with the close-X pushed +into the corner. Doctor-report is the worst offender — it carries a +multi-row date-range form + a comment textarea, and the body +overflows the dialog's `max-h-[calc(100dvh-2rem)]` so the form +scrolls inside a desktop card instead of feeling like a sheet. +**Fix shape**: Migrate every site to ``. The body +markup stays identical; replace the `` + `` + +`` + `` pairs with the sheet primitive's +`title` / `description` / `footer` slots. The Sheet branch already +takes the `90dvh` cap and sticky footer for free. +**Effort**: small (each site) / medium (all five) `[hotfix-ready]` + +### F-4: Coach FAB overlaps the bottom-nav on notched iPhones + +**Severity**: high +**Surface**: insights +**Viewport**: `` or `