[Mobile] Responsive pass — all pages at 375px width

Start with the current responsive CSS and the approved Sage & Blush mobile mockup, then use Chrome DevTools at 375×667 to audit dashboard, accounts, ledgers, review, and settings. Check the listed mobile-nav, button, grid, padding, contrast, and landscape requirements. Done means all acceptance criteria pass without horizontal overflow and with accessible tap targets, contrast, and safe-area spacing.

Part of Epic #340 — Sage & Blush UI Redesign

Depends on: #343 (nav), #344 (dashboard), #345 (accounts), #346 (ledgers), #347 (review)

Layer 5 — Final QA / mobile polish pass. Done after all page tickets land.

---

Overview

A systematic mobile audit across all redesigned pages at 375px viewport width (iPhone SE / standard phone size). Ensure the Sage & Blush design holds up on small screens.

Approved Mobile Mockup

---

Checklist by Page

All Pages

• No horizontal scroll at 375px (check with browser DevTools)
• All interactive elements: min 44px tap target height
• Bottom mobile nav: correct Lucide icons, 44px tap targets, cobalt active
• Header: 44px height, wordmark visible, theme toggle accessible
• Body text (11px) remains readable — check contrast (WCAG AA 4.5:1 minimum)

Dashboard

• Stat tiles: 2-column grid still works at 375px (or falls back to 1-column)
• Spending bar chart: bars don't overflow container
• Sync log: scrollable but doesn't overflow viewport
• Sync button: full-width at 375px (.action-row stacking)

Accounts

• Net worth card: numbers legible (clamp font-size working)
• Institution headers: not clipped
• Account cards (accordion): full width, touch-friendly expand
• Account balance: still 16px, right-aligned
• Action buttons (disconnect, rename): stacked or full-width

Ledgers

• Period selector: wraps gracefully (no overflow)
• Custom date range row: inputs don't clip
• Summary cards: full-width, amounts readable
• Drill-down table: scrollable horizontally if wide, or columns hidden via .responsive-hide-sm
• Totals row: stacks vertically at 375px (already in responsive CSS — verify)

Review

• Review cards: full-width, status chips visible
• Amounts: not clipped
• Action buttons: full-width stacked
• Reasoning text: wraps correctly (no overflow)

---

Changes Required

Mobile nav icon sizing

Ensure Lucide icons in mobile nav render at the right size:

.mobile-nav .mobile-nav-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2px;
}

Button tap targets

All .btn-sm instances in tables/toolbars need 44px min-height on mobile:

@media (max-width: 480px) {
  .btn-sm { min-height: var(--tap); padding: 10px 14px; }
}

(This already exists in current CSS — verify it still applies after component changes.)

Dashboard grid on mobile

@media (max-width: 480px) {
  .dashboard-grid {
    grid-template-columns: 1fr;  /* single column on phones */
    gap: var(--space-2);
  }
}

Bottom nav padding

Ensure body padding-bottom accounts for the 44px nav + safe area:

@media (max-width: 480px) {
  body { padding-bottom: max(80px, calc(44px + env(safe-area-inset-bottom) + 16px)); }
}

---

Testing Protocol

1. Open Chrome DevTools → Device Toolbar → iPhone SE (375×667)
2. Test each page: dashboard, accounts, ledgers, review, settings
3. Rotate to landscape (667×375) — ensure no layout breaks
4. Test with iOS Safari user agent for safe-area-inset-bottom
5. Check contrast: --muted text on --bg (warm off-white bg changes contrast from pure white)

Contrast check for 9px labels

At 9px, WCAG Large Text threshold doesn't apply. Aim for 7:1 contrast on small text. Verify:

• --muted (#8A7F78) on --bg (#FAF8F4) → check contrast ratio
• Adjust --muted if below 4.5:1

---

Acceptance Criteria

• No page has horizontal scroll at 375px
• All tap targets ≥ 44px on mobile
• Mobile nav renders with Lucide SVG icons (not emoji)
• Dashboard grid: 1-column at 375px
• Stat tile numbers readable at 375px (not clipped)
• Contrast: body text and labels meet WCAG AA (4.5:1+)
• Safe area inset respected on bottom nav (iPhone X+ notch)
• Landscape rotation at 375 height: no broken layouts