Responsive Layout
The same screens adapt to the user's device.
Web — Split Panel
For office staff on desktop browsers (screens wider than 1024px):
┌──────────────────┬────────────────────────────────┐
│ Dashboard Queues │ Vehicle Detail View │
│ (scrollable) │ │
│ │ 🚗 66-696-101 · Toyota · בטיפול │
│ ⚠️ Attention (5) │ │
│ ├ Vehicle A │ [Mokeds] [Photos] [Parts] ... │
│ ├ Vehicle B ◀── │ │
│ └ Vehicle C │ Moked 1: Front Damage │
│ │ Jobs: 3 · Parts: 2 │
│ ✅ Ready (3) │ ⚠️ Addition pending │
│ └ ... │ [Approve] [Reject] │
│ │ │
│ 🔧 In Repair(12)│ Quick Actions: │
│ └ ... │ [📷 Photos] [➕ Addition] ... │
└──────────────────┴────────────────────────────────┘
Selecting a vehicle in the left panel (35% width) updates the right panel (65% width) instantly. Office staff can process a queue of items without losing their place in the list.
Phone — Stacked
For tinsmiths and drivers on mobile (screens narrower than 600px):
┌────────────────────┐ ┌────────────────────┐
│ Smart Dashboard │ tap │ ← Dashboard │
│ │ ──────► │ │
│ ⚠️ Attention (5) │ │ 🚗 66-696-101 │
│ ┌────────────────┐ │ │ Toyota · בטיפול │
│ │ 66-696-101 │ │ │ │
│ │ Toyota · בטיפול│ │ │ [Mokeds][Photos]... │
│ └────────────────┘ │ │ │
│ ┌────────────────┐ │ │ Moked 1: Front │
│ │ 55-432-789 │ │ │ [Approve] [Reject] │
│ └────────────────┘ │ │ │
│ │ │ [📷] [➕] [📋] │
└────────────────────┘ └────────────────────┘
Dashboard is full-screen, vehicle cards are tappable
Vehicle detail is a pushed screen with back navigation
Action panels slide up from the bottom
Touch targets are 44px minimum for garage use
Breakpoints
Width | Layout | Target User |
|---|---|---|
< 600px | Single column, stacked navigation | Phone — tinsmiths, drivers |
600–1024px | Single column, wider cards | Tablet |
> 1024px | Split panel (queues + detail) | Web — office staff |
15 March 2026