Fix mobile responsive layout across frontend

[Copilot]

Tables, text, and grids overflow horizontally on mobile devices, making the app unusable on small screens.

Changes

Tables

• Wrapped tables in overflow-x: auto containers with touch scrolling
• Applied to Leaderboards, DeckEditor snapshots, and modal tables

Grids & Layouts

• Applied Material-UI responsive breakpoints to all Grid components
• Deck cards: xs: 100% → sm: 100% → md: 100% (stack vertically)
• Snapshot cards: xs: 100% → sm: 50% → md: 33%
• Stats grids: xs: 1col → sm: 2col → md: auto-fit

Text Overflow

• Added wordBreak: 'break-word' to Typography components displaying user-generated content (deck names, commander names, URLs)
• Applied overflowWrap where needed

Forms & Controls

• Form elements use { xs: '100%', sm: 'auto' } width patterns
• All interactive elements have minHeight: '44px' for touch targets
• Button groups wrap with flexWrap: 'wrap'

Global Styles

• Added html, body { max-width: 100%; overflow-x: hidden; }
• Applied box-sizing: border-box reset

Example Pattern

// Before
<Grid sx={{ width: '100%' }}>
  <Card sx={{ height: 125 }}>
    <Typography variant="subtitle1" noWrap>{deck.name}</Typography>
  </Card>
</Grid>

// After
<Grid sx={{ width: { xs: '100%', sm: '50%', md: '33%' } }}>
  <Card sx={{ minHeight: 125, display: 'flex', flexDirection: 'column' }}>
    <Typography variant="subtitle1" sx={{ wordBreak: 'break-word' }}>
      {deck.name}
    </Typography>
  </Card>
</Grid>

Charts (LineChart/MultiLineChart) already use width="100%" with resize listeners - no changes needed.

Original prompt

Problem

The frontend does not look good on mobile devices. Text, graphs, and tables go off the screen horizontally, making the app difficult to use on mobile.

Required Changes

1. Fix Table Overflow Issues

• Leaderboards.tsx: Wrap the leaderboard table in a responsive container with horizontal scroll on mobile
• DeckEditor.tsx: Ensure snapshot tables don't overflow on small screens
• SnapshotModals.tsx: Make modal tables responsive with proper wrapping

2. Fix Graph/Chart Responsiveness

• Analytics.tsx: Make the LineChart and MultiLineChart components fully responsive
  • Use container-based width instead of fixed width
  • Add proper resize listeners
  • Ensure charts scale down properly on mobile devices
  • Add touch-friendly interactions

3. Fix Text and Layout Overflow

• All pages: Add proper word-wrap and overflow handling for long text (deck names, URLs, etc.)
• Use Material-UI's responsive breakpoints (sx={{ xs, sm, md, lg }}) where appropriate
• Add proper padding/margins that scale with screen size
• Ensure Typography components wrap properly

4. Improve Grid Layouts

• Home.tsx: Make the deck grid responsive (currently uses Grid component)
  • Stack cards vertically on mobile
  • Use appropriate column counts for different breakpoints
• DeckEditor.tsx: Ensure card grids are mobile-friendly

5. Add Responsive Containers

• Wrap wide content in scrollable containers with:
  • overflow-x: auto for horizontal scroll where needed
  • max-width: 100% to prevent overflow
  • -webkit-overflow-scrolling: touch for smooth mobile scrolling

6. Fix Form Elements

• Ensure TextField, Select, and Button components are touch-friendly
• Add appropriate spacing for mobile tap targets (minimum 44px height)
• Make sure form layouts stack properly on mobile

7. Update CSS/Styling

• frontend/src/index.css: Add mobile-first responsive utilities
• Add global styles for preventing overflow
• Consider updating the container max-width for mobile

Technical Guidelines

• Use Material-UI's responsive sx prop and breakpoints system
• Test on common mobile breakpoints: 320px, 375px, 414px, 768px
• Use CSS Grid/Flexbox with proper wrapping behavior
• Add word-break: break-word where needed for long strings
• Use min-width: 0 on flex items to allow proper shrinking
• Ensure all interactive elements are at least 44x44px for touch targets

Files to Modify

• frontend/src/pages/Home.tsx
• frontend/src/pages/Analytics.tsx
• frontend/src/pages/Leaderboards.tsx
• frontend/src/pages/DeckEditor.tsx
• frontend/src/pages/SnapshotModals.tsx
• frontend/src/index.css
• Any chart/graph components used in Analytics

Testing Checklist

• Tables scroll horizontally on screens < 768px wide
• Graphs resize properly on window resize
• No horizontal page scroll on any screen size
• Text wraps properly, no overflow
• Cards/grids stack appropriately on mobile
• Touch targets are appropriately sized
• Forms are usable on mobile devices

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.