# Desktop-first health dashboard UX/code audit

Use for read-only reviews of an existing health-dashboard preview before a desktop-first redesign sprint.

## Review workflow

1. Freeze the baseline commit and inspect `git status`; concurrent working-tree edits are not yours and must be reported separately.
2. Read sprint acceptance criteria, renderer/HTML, CSS, client controller, exact bundle contract, provider, synthetic fixture, and browser tests together.
3. Generate only a temporary synthetic database/dashboard, serve it through the real hardened local route, and verify the DB digest is unchanged afterward.
4. Inspect the actual desktop UI at the target viewport. Record computed layout evidence: root children, nav display/direction/position and box, main/card/chart boxes, page overflow, and scroll position.
5. Run focused unit and committed browser suites. If dependencies are absent, a temporary reproducible `npm ci` is acceptable; remove only review-created `node_modules`, traces/results, temporary fixtures, and server processes afterward.
6. Rerun focused tests and repository status after browser work because concurrent edits may land during the review.

## High-value implementation checks

- **Rendered structure versus dormant CSS:** CSS classes such as shell/main/rail may exist without being emitted by the renderer. Do not infer a desktop shell from stylesheet declarations.
- **Cascade conflicts:** compare computed `display`, direction, and position. A later generic `[data-dashboard-nav] { display:flex; flex-direction:column }` can override an earlier `.bottom-nav { display:grid }`, producing a tall vertical navigation everywhere.
- **Fixed-navigation occlusion:** no horizontal overflow and 44px targets do not prove content remains visible. Measure fixed-nav height and overlap against visible content at every responsive/zoom breakpoint.
- **Long-label masking:** `overflow-x:hidden` can conceal card overflow. Ensure every relevant card—not only one shared card class—has wrapping/min-width rules, and inspect long synthetic medication/lab/food labels visually.
- **Future observations:** period filtering needs both lower and upper bounds. A future-dated point must be anomaly/check and must not become ordinary `latest`, baseline input, or chart fallback merely because it sorts last.
- **Desktop product hierarchy:** verify Today remains useful without the primary metric, limits tasks/notices, separates actual versus planned medication, and exposes deterministic freshness/short history. Verify Cockpit cards include value/unit, date/age, earlier-personal baseline, gap-preserving sparkline, and quality/coverage.
- **Chart fallback:** choose a deterministic allowlisted fallback only when the preferred complete series is unavailable; label the fallback honestly and preserve a separate event track.
- **Exact contracts:** when bundle validators require exact fields, coverage/freshness additions require an explicit contract revision plus provider, renderer, fixture, and tests—not an unvalidated frontend-only extension.
- **Privacy/print lifecycle:** new canvases and cards must inherit privacy masking, print visibility rules, reduced motion, and the existing chart destroy/update/reuse lifecycle.

## Concrete redesign shape

Preserve stable IDs, roles, CSP-safe external assets, one `main`, and existing action routes while changing wrappers:

- Desktop (`>=1200px`): 216–232px sticky side rail plus capped main content.
- Tablet (`768–1199px`): compact sticky horizontal top navigation; avoid a fixed mobile bar.
- Mobile (`<=767px`): true horizontal bottom navigation with safe-area/content clearance and a central capture affordance.
- Effective narrow width/200% zoom: switch fixed navigation to static/two-row behavior so dynamic nav height cannot cover content.

A useful 12-column layout is:

- Today: snapshot 8 + tasks 4; medication 8 + freshness 4; notices 12.
- Cockpit: six cards across 3×2; main chart 8 + event rail 4; stack chart/event below the desktop threshold.

## Browser-test gaps to add

- fixed-nav/content intersection at phone, tablet, desktop, and 200% text;
- computed navigation orientation and placement;
- future point visibly marked and excluded from ordinary latest/fallback;
- fallback chart source changes when the preferred series is empty;
- sparklines retain JSON/chart `null` gaps and do not duplicate instances;
- every new data-bearing card/canvas is masked in privacy mode and printable where required;
- exact 1920×1080 and 1440×900 desktop probes in addition to smaller viewports.

## Reporting

Return findings first with file/line and runtime evidence, then a file-anchored redesign blueprint, implementation risks, verified tests, and cleanup/status. Distinguish committed-baseline observations from concurrent uncommitted changes.