Adds a responsive mobile experience scoped to MANAGER and SUPERUSER roles:
Layout:
- Sidebar hidden on small screens (md: breakpoint)
- New MobileHeader (logo + notification bell + sign out) visible on mobile
- New MobileBottomNav (Approvals + Profile tabs) pinned to bottom on mobile
- New DesktopRequired overlay shown to all other roles on small screens —
a fixed full-screen message directing them to use a desktop browser
Approvals queue:
- Desktop: existing table layout (hidden md:block)
- Mobile: tap-to-review card stack (md:hidden) — shows PO number, title,
submitter, cost centre, amount, and a full-width Review button
PO approval detail:
- ManagerEditPoForm (direct field editing) hidden on mobile; still available
on desktop (direct edits not required per spec)
- ApprovalActions buttons stack full-width on mobile, row on sm+
- Paddings reduced on small screens throughout
PO detail component:
- Order Details and Vendor grids switch from grid-cols-2 → grid-cols-1
on small screens (sm:grid-cols-2 restores two columns at 640px+)
- Section padding reduced on mobile (p-3 md:p-6, p-4 md:p-6)
- Line items table already had overflow-x-auto — no change needed
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Hardik
cfb16600d7