Epic: Frontend Revamp + Mobile Optimization

Start with VISUAL_QA.md and style.css, then inspect the listed route templates, especially accounts.html and the auth templates. Use the 390px, 768px, and 1440px viewport checklist to establish the current state. Done means every listed page passes all viewports, meets the 44×44px target requirement, removes inline styles, and has visual regression screenshots for CI.

Overview

Friday Budgeting Pro is a local-first personal finance app with a FastAPI + Jinja2 frontend. The current UI works well on desktop but has no responsive breakpoints, no mobile navigation, and numerous touch-target and typography issues that make it difficult to use on phones and tablets.

This epic tracks the full frontend revamp to make every page:

• Fully responsive across mobile (390px), tablet (768px), and desktop (1440px)
• Accessible (WCAG AA contrast, keyboard navigation, ≥44px touch targets)
• Visually consistent via a proper design token / component system

Pages in Scope

Visual QA Checklist

Full audit checklist with viewport sizes, pass/fail criteria, and current
baseline grades lives in VISUAL_QA.md.

Current Baseline (2026-05-31)

Top 5 Critical Issues

1. Zero responsive breakpoints — style.css has no @media queries; every page breaks on mobile
2. Navigation overflows on mobile — horizontal nav bar clips or wraps; no hamburger/drawer menu
3. Tables not mobile-friendly — accounts, ledgers, settings, and profile use bare <table> with no responsive reflow
4. Touch targets too small — .btn-sm is ~26×22px; delete/rename buttons have no padding; WCAG 2.5.5 requires 44×44px
5. Mixed/fragmented CSS — inline <style> blocks in accounts.html shadow globals; many hardcoded hex colors instead of CSS vars

Sub-Issues

• #286 Responsive layout audit and grid system standardization
• #287 Mobile navigation — hamburger menu / bottom nav for small screens
• #288 Touch target sizing — all buttons/links min 44×44px on mobile
• #289 Typography scale — responsive font sizes across breakpoints
• #290 Form UX on mobile — inputs, selects, date pickers
• #291 Visual regression testing setup — screenshot diff workflow
• #292 Component library / design token standardization
• #293 /accounts page — responsive table and transaction expand list
• #294 /ledgers page — responsive table, period selector, and totals row
• #295 /profile page — account descriptions layout overflow on mobile
• #296 /settings page — unstyled submit button and rules table
• #297 Dashboard — spending summary charts and transaction review widget

Definition of Done

• All pages grade ✅ Pass at all three viewports in VISUAL_QA.md
• All buttons/links have ≥ 44×44px tap targets on mobile
• No inline <style> blocks in templates; all styles in style.css using CSS vars
• Visual regression screenshots committed for CI comparison