Mobile web optimized layout

[auerbachb]

Summary

The current app layout is designed for desktop and looks bad on mobile phones. Need a responsive layout that works well on small screens.

Areas to address

• Timer blocks: grid overflows on narrow screens (75px blocks + 505px maxWidth)
• Block countdown font (120px) too large for mobile
• 60s progress bar and MindStateBar (460px) wider than most phone screens
• Nav bar (top-right) and username badge (top-left) overlap on small screens
• Auth form inputs and buttons need touch-friendly sizing
• History view bar charts and stats columns need mobile widths
• FAQ section on home should be full-width on mobile
• ThoughtCapture input needs mobile keyboard-friendly layout

Approach

• Use CSS media queries or viewport-based sizing in inline styles
• Target breakpoint around 480px for mobile
• Consider a stacked nav layout or hamburger menu for mobile
• Ensure touch targets are at least 44x44px

🤖 Generated with Claude Code