Mobile Responsive — Phone/tablet optimization + PWA support

[GareBear99]

Overview

Optimize the platform for mobile devices and tablets — responsive layouts, touch interactions, and mobile-specific UX.

Current State

• Basic responsive breakpoints exist (900px, 600px)
• GPS map has touch support (pinch-to-zoom, drag)
• Some UI elements are cramped on small screens
• Navigation tabs hidden on mobile with no replacement

Scope

• Mobile navigation — hamburger menu or bottom tab bar for phone screens
• Card layouts — single-column listing cards on narrow viewports
• Touch targets — minimum 44px tap targets on all interactive elements
• Filter UX — collapsible filter bar or slide-out drawer on mobile
• Detail modal — full-screen on mobile instead of centered overlay
• PWA support — manifest.json, service worker for offline access, add-to-homescreen

Acceptance Criteria

• Fully usable on iPhone SE (375px) and iPad (768px)
• Navigation accessible on all screen sizes
• No horizontal scroll on any page
• Touch targets meet 44px minimum