Mobile-Responsive Polish (375px–768px)

[WFord26]

Context

Clients book on mobile. The public booking flow, dashboard, and project detail pages need to be pixel-perfect at mobile breakpoints. The design critique flags this as a "Should Have" for GA — clients booking on phone is a primary use case for professional services.

Scope

Audit & Fix Breakpoints

Test and fix at these widths:

• 375px — iPhone SE (smallest target)
• 428px — iPhone 14/15 Pro Max
• 768px — iPad portrait / tablet
• 1024px — iPad landscape / small desktop

Priority Areas

1. Public Booking Flow (PublicBookingPage.tsx)

• Step progress bar readable/functional at 375px
• Time slot grid: 1 column on mobile, 2 on tablet
• Contact form fields: full-width on mobile
• Action buttons: full-width, stacked on mobile
• Calendar date picker: touch-friendly, scrollable

2. Dashboard (DashboardPage.tsx)

• Project cards: single column on mobile, 2 on tablet
• Metric hero cards (Issue Dashboard Metrics Hero Section #15): 1 column on mobile, 2 on tablet
• Create button accessible without scrolling

3. Project Detail (ProjectDetailPage.tsx)

• Time block table: horizontal scroll on small screens
• Booking list: card layout on mobile (not table rows)
• Action buttons: icon-only or stacked on mobile

4. Sidebar/Navigation (Layout.tsx)

• Hamburger toggle works reliably
• Sidebar overlays content on mobile (not pushes)
• Close on outside click and navigation

5. Touch Targets

• All interactive elements ≥ 44px touch target (Apple HIG)
• Adequate spacing between adjacent tap targets
• No hover-only interactions

Files to Modify

• packages/client/src/styles/global.css — media queries, responsive utilities
• Individual page/component files as needed for layout restructuring

Effort

M (3-5 days)

Acceptance Criteria

• All pages tested at 375px, 428px, 768px, 1024px
• No horizontal overflow or content truncation
• Booking flow fully completable on iPhone SE-sized screen
• Time block table scrolls horizontally without breaking layout
• All touch targets ≥ 44px
• Sidebar hamburger toggle works on all mobile sizes
• No text overlaps or unreadable font sizes
• Screenshots or recordings for each breakpoint attached to PR