TorbatYar/frontend/docs/hospitality-responsive-report.md

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