#Responsive design
The whole app must work from 320 px to large desktops. Breakpoints follow Tailwind: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
| Element | < 768 px (mobile) | 768–1279 px (tablet / laptop) | ≥ 1280 px (desktop) |
|---|---|---|---|
| Sidebar | Hidden. Drawer from the hamburger | Collapsible (icons only) | Expanded, collapsible |
| Mobile drawer | Full-height sheet, scrim, focus trap, closes on navigation | — | — |
| Top bar | Logo, org switcher (short), search icon, bell, avatar | + breadcrumbs (short) | Full breadcrumbs, search field |
| Organization switcher | Opens a full-screen list (sheet) | Dropdown | Dropdown |
| Tables | Become cards (key fields + menu) or a horizontally scrollable table with a sticky first column. Actions in a "⋯" menu | Hide low-priority columns | All columns |
| Charts | Full width, fewer ticks, legend below, touch tooltips | Two per row | Grid layout |
| Cards / KPIs | 1 column (KPIs 2 per row) | 2 columns | 4 columns |
| Forms | One column, full-width inputs, sticky submit bar | Two columns where sensible | Two columns with a side summary |
| Modals | Bottom sheet / full screen for long forms | Centred dialog | Centred dialog |
| Server details | Tabs scroll sideways (or a select). Metrics stacked | Tabs + 2-column metrics | Tabs + grid |
| Billing | Balance card first, then actions, then history cards | 2 columns | Overview grid |
| Plans | Plans stacked or swiped. Comparison table scrolls sideways | 2 per row | All plans side by side |
#Rules
- Touch targets ≥ 44 × 44 px. No hover-only actions (every hover action also has a tap path).
- No horizontal page scroll at 320 px. Only tables/code may scroll inside their container, with a visible hint.
- Long values (emails, domains, IPs, keys) wrap or truncate with a tooltip/copy.
- Test widths: 320, 375, 768, 1024, 1280, 1440, 1920 (see Testing).
- Respect
prefers-reduced-motion.