# Proposal: Add Mobile Responsive Layout

## Summary
Add device detection and responsive layout switching to optimize the user experience on mobile devices (<768px). The frontend currently only supports desktop and tablet layouts, leaving mobile users with horizontal scrolling issues and poor usability.

## Motivation
- **Fixed sidebar widths** (w-72 for members, w-80 for files) cause horizontal overflow on mobile screens
- **Header controls** don't adapt to narrow screens, causing button wrapping issues
- **No mobile navigation pattern** - current horizontal nav doesn't collapse
- **Small touch targets** - buttons use px-3 py-1.5 which is difficult to tap on mobile
- Mobile devices are commonly used on the production floor for quick incident reporting

## Scope

### In Scope
1. **Device Detection Hook** (`useIsMobile`) - Detect mobile vs desktop using media queries
2. **Collapsible Sidebars** - Transform fixed sidebars into slide-in panels on mobile
3. **Mobile Header** - Simplified header with hamburger menu or action sheet
4. **Bottom Toolbar** - Move frequently used actions to bottom of screen for thumb-friendly access
5. **Touch-Friendly Sizing** - Increase button/input sizes on mobile
6. **Responsive Text** - Adjust font sizes for readability on small screens

### Out of Scope
- Native mobile app (PWA can be considered later)
- Offline functionality
- Push notifications
- Complex gestures (swipe to delete, etc.)

## Technical Approach

### Device Detection
```typescript
// hooks/useMediaQuery.ts
export function useIsMobile(): boolean {
  return useMediaQuery('(max-width: 767px)')
}

export function useIsTablet(): boolean {
  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)')
}
```

### Layout Strategy
- **Mobile (<768px)**: Single-column layout, slide-in sidebars, bottom action bar
- **Tablet (768-1023px)**: Current behavior with minor adjustments
- **Desktop (>1024px)**: Current behavior (unchanged)

### Key Component Changes

| Component | Mobile Behavior |
|-----------|----------------|
| RoomDetail Header | Collapse to hamburger menu, show essential actions only |
| Members Sidebar | Slide-in from right, full-screen overlay |
| Files Sidebar | Slide-in from right, full-screen overlay |
| Message Input | Sticky bottom with larger touch targets |
| Room Cards | Full-width single column |

## Impact
- **frontend-core** spec: Add mobile-specific requirements to "Responsive Layout and Navigation"
- Estimated file changes: ~8 frontend files
- No backend changes required

## Related Changes
- None (standalone improvement)