diff --git a/.planning/phase-A6-report.md b/.planning/phase-A6-report.md new file mode 100644 index 000000000..ad9170f2f --- /dev/null +++ b/.planning/phase-A6-report.md @@ -0,0 +1,106 @@ +# Phase A6 — Settings mobile audit + consistency + +**Owner:** A6 agent (Wave A, parallel with A1-A5, A7-A8) +**Date:** 2026-05-10 +**Result:** done + +Audit findings and the fix plan live in +[`.planning/phase-A6-settings-audit.md`](./phase-A6-settings-audit.md). +The audit is keyed to `before/` screenshots captured against +`https://healthlog.bombeck.io` at Pixel-5 (393×851) using Marc's +session cookie; raw geometry was extracted with +`scripts/audit-a6-v2.mjs` to spot the height mismatches the +human eye missed. + +## What was wrong + +- **Four input heights in the same shell.** The shared `` + primitive renders at 36 px (`h-9`) but Settings broke the contract + at three points: the AI active-provider native `` | 36 | 36 | +| account | Email `` | 36 | 36 | +| account | Gender native `` | 36 | 36 | +| account | Date of birth `` | 36 | 36 | +| account | Language native `` | **40** | 36 | +| ai | "Add provider" native `` fields | 36 | 36 | +| notifications | All telegram + ntfy `` | 36 | 36 | + +The account section is internally consistent at 36 px. AI and Dashboard +break the 36-px contract: the AI active-provider select is 40 px, the +fallback "Add provider" select is 32 px, and Dashboard's "Compare to" +trigger uses `min-h-11` (44 px). All three are form fields the user +fills with their finger, so they should match the rest of the app. + +### Action-button placement + +| Section | Button | Placement on mobile | Overflow? | +| ------------- | ------------------------------- | ------------------------ | --------------------------------- | +| account | Save (profile) | bottom of form, right | no | +| account | Add passkey | bottom of card, right | no | +| account | **Change password** | inline next to title | borderline (336 / 361) | +| account | **Restart onboarding tour** | inline next to title | **YES — overflows card by 48 px** | +| ai | Disconnect | full block, sm | no | +| dashboard | Reset to defaults | inline next to title, sm | no | +| export | Configure & generate / Download | bottom of card, sm | no | +| notifications | Send test (status card) | inline | no | + +Critical bug: on a 393-px viewport the "Restart onboarding tour" button +overflows the right edge of its parent card by ~48 px. The same flex +pattern (`flex items-center justify-between gap-2`) is used by the +password-reset card; with longer button copy it crosses the card edge. + +### Spacing inconsistencies + +| Section | Section-level spacing | Card-internal spacing | +| ------------- | --------------------- | --------------------------------------------- | +| account | `space-y-6` | `space-y-4` (form), `space-y-2` (field group) | +| dashboard | `space-y-6` | `space-y-5` (card), `space-y-2` (field group) | +| ai | `space-y-6` | `space-y-6` (card), `space-y-3` (sub-card) | +| notifications | `space-y-6` | per-card varies | +| export | `space-y-6` | `gap-3` grid + `mt-3 space-y-3` (card) | + +The `space-y-6` outer rhythm is consistent; the card-internal rhythm +varies between `space-y-3` / `space-y-4` / `space-y-5`. Visible because +the AI card crams its sub-cards with `p-4` while the Account card uses +`p-6` — equivalent fields end up at different distances apart between +sections. + +### Sprache-Menü specifics + +The Sprache (language) `