# Hospitality Responsive Report

**Date:** 2026-07-26  
**Product:** Torbat Food

## Breakpoints strategy

Mobile-first Tailwind utilities aligned with shared DS:

| Breakpoint | Layout behavior |
|------------|-----------------|
| `< lg` | Hidden sidebar; hamburger opens full-height drawer |
| `≥ lg` | Fixed 256px sidebar (`w-64`), content flex-1 |
| `sm` | Dashboard stat grid 2 columns |
| `xl` | Dashboard stat grid 4 columns |

## Component responsiveness

| Component | Mobile | Tablet | Desktop |
|-----------|--------|--------|---------|
| `HospitalityPortalShell` | Drawer nav | Drawer nav | Persistent sidebar |
| `HospitalityTablePage` | Horizontal scroll via DataTable | Full width search | Search max-w-md |
| Dashboard StatCards | Stack 1→2 cols | 2 cols | 4 cols |
| Dialogs | Full-width modal (DS) | Centered | Centered |
| Hub card | max-w-lg centered | Same | Same |

## Touch targets

- Nav links: `py-2.5` (~40px+ height)
- Icon buttons: DS `size="icon"` minimum
- Mobile menu button in header

## Performance on mobile

- Route-level code splitting via Next.js dynamic imports (default App Router)
- TanStack Query `staleTime` on capabilities (60s) reduces refetch
- Paginated lists (20 items) limit DOM size

## RTL on small screens

- Mobile drawer anchors from right (`absolute right-0`)
- Search icon positioned for RTL input padding

## Testing checklist

- [ ] iPhone SE: open drawer, navigate to menu items
- [ ] iPad: sidebar visible at lg
- [ ] Desktop 1920px: dashboard 4-column stats
- [ ] Dark mode toggle on mobile header/footer

## Lighthouse notes

- Use real backend in dev for accurate TTFB
- Images in menu media use refs only (no binary in hospitality service)
- Minimize layout shift: LoadingState skeletons on route transitions