diff --git a/.planning/research/v1427-r3c-mobile-dashboard.md b/.planning/research/v1427-r3c-mobile-dashboard.md new file mode 100644 index 000000000..cb1d81e3f --- /dev/null +++ b/.planning/research/v1427-r3c-mobile-dashboard.md @@ -0,0 +1,187 @@ +--- +file: .planning/research/v1427-r3c-mobile-dashboard.md +purpose: Mobile capability audit — dashboard and home page +created: 2026-05-15 +auditor: MA1 +--- + +# Mobile audit — dashboard and home + +## Summary + +Reviewed 14 surfaces composing `/` (page composition, 9 tile / chart components, GLP-1 secondary tile, hero strip, daily briefing, health-score card, onboarding checklist, tour launcher, recent-achievements card, and the dashboard-layout settings read path). The trend-card strip, the chart range tabs, and the bottom-nav safe-area are already mobile-first, but the quick-add `` shells, the GLP-1 tab strip, the dashboard-layout reorder controls, and the chart Y-axis offset still ship desktop-first patterns that strand mobile users. 16 findings: 1 Critical, 5 High, 6 Medium, 4 Low. + +## Findings + +### F1 — Quick-entry forms render in a desktop `` with no mobile sheet, no height cap, and no keyboard hints + +- Severity: Critical +- Axis: logic +- File: `src/app/page.tsx:527-554`, `src/components/measurements/measurement-form.tsx` (446 lines), `src/components/mood/mood-form.tsx` (284 lines) +- Symptom: On 320 / 375 / 390 / 414 px viewports the Add → "Log measurement" entry mounts `` with `max-w-[calc(100%-2rem)]` but **no max-height and no internal scroll**. The 446-line `` overflows the viewport, the iOS soft-keyboard then occludes the submit row, and there is no sticky bottom CTA. Plus every number/date input on the form ships without `inputmode`, `enterkeyhint`, or `autocomplete` (verified via grep — only `type="number"` appears, no inputMode). +- Evidence: `DialogContent` className at `src/components/ui/dialog.tsx:64` has no `max-h-[...]` and no overflow-y; grep for `inputmode|enterkeyhint|autocomplete` against both forms returns zero hits. +- Recommended fix: Branch on a `useIsMobile()` hook to mount `` below `md:` (already present in `src/components/ui/sheet.tsx`), add `max-h-[calc(100dvh-2rem)] overflow-y-auto` to `DialogContent`, sticky-pin the Save / Cancel row, and add `inputMode="decimal"` / `enterKeyHint="next"` to every numeric field. +- Effort: M + +### F2 — Quick-add trigger sits below the 44 × 44 floor on the home greeting row + +- Severity: High +- Axis: visual +- File: `src/app/page.tsx:479-487` +- Symptom: The `