[Polish] Responsive mobile layout

[grovecj]

Summary

Ensure the entire application is usable and visually polished on mobile devices.

Details

Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

Mobile Adaptations

Component	Desktop	Mobile
Navigation	Top navbar with links	Hamburger menu or bottom tab bar
Stat cards	3-4 per row	1-2 per row, vertically stacked
Charts	Full width inline	Full width, swipeable carousel
Match history table	Full table with all columns	Card-based layout, key stats only
Comparison table	Side-by-side columns	Stacked cards per player
Squad member cards	Horizontal row	Vertical list
Search bar	Inline in navbar	Expandable full-width on focus

Touch Interactions

• Swipe between game mode tabs
• Pull-to-refresh on player stats page
• Tap match card to expand details (instead of hover)

Testing

• Test on Chrome DevTools device emulation (iPhone 14, Pixel 7, iPad)
• Verify no horizontal scroll on any page
• Verify touch targets are at least 44x44px

Acceptance Criteria

• All pages render correctly on mobile (< 640px)
• Navigation works on mobile (hamburger or bottom tabs)
• Stat cards stack vertically on small screens
• Charts are readable and interactive on mobile
• Match history adapts to card layout on mobile
• No horizontal overflow on any page at any breakpoint