# Layout & Responsive Behavior

Resolves `../ux/04-open-questions.md` #4: the mobile navigation pattern, deferred from Phase 2, decided concretely here.

## Breakpoints

| Token | Range | Typical device |
|---|---|---|
| `mobile` | < 640px | Phone |
| `tablet` | 640px – 1024px | Tablet, small laptop window |
| `desktop` | > 1024px | Laptop, desktop |

## Desktop layout (> 1024px)

Persistent left sidebar (per `03-component-conventions.md`'s navigation shell), fixed at 240px width, full nav labels visible. Main content area has a max width of 1280px, centered, with `space.8` (32px) or greater side margins on wider viewports — content never stretches edge-to-edge on a large monitor, per `01-design-principles.md` rule 3 (generous whitespace by default). Forms and detail pages use a 12-column grid; most forms occupy 8 of 12 columns, leaving margin rather than filling the full content width, since a full-width form on a wide screen hurts readability (line length) more than it helps.

## Tablet layout (640px – 1024px)

The sidebar collapses to an icon-only rail (72px wide, icons only, no labels) rather than disappearing — a merchant checking the store from a tablet still has one-tap access to all seven sections, just without the label text. Tapping a rail icon navigates directly (it's not a flyout menu); a persistent rail is preferred over a hidden drawer because it keeps navigation a single, predictable tap regardless of screen size, consistent with `01-design-principles.md` rule 8 (no unnecessary friction).

## Mobile layout (< 640px) — the resolved question

Bottom tab bar with **4 slots**: **Home, Orders, Products, and Menu**. This directly answers `../ux/04-open-questions.md` #4's two questions:

- **Pattern:** a bottom tab bar, not a hamburger drawer as the primary pattern — consistent with the "fast, confident" principle, since the most common actions are one tap away rather than two (open drawer, then select).
- **Prominence:** not all seven sections get equal mobile prominence. Home, Orders, and Products get dedicated bottom-bar slots because they match the flows most plausibly done on the go (`../ux/02-core-user-flows.md` #3 fulfilling an order, #5 checking Store Health, and quick product edits/stock checks). Customers, Marketing, Reports, and Settings live behind the fourth slot, **Menu**, which opens a full-screen list — these are lower-frequency or more naturally desktop-based tasks (building a campaign, reading a detailed report) that don't need one-tap prominence.

This is a deliberate exception to `../ux/01-information-architecture.md`'s "no overflow menu" rule for desktop — that rule protects against clutter on a canvas with room for seven items; mobile's constrained width makes some grouping unavoidable, and grouping the four lowest-frequency sections behind one clearly-labeled "Menu" tab is different from the ad hoc "More" catch-all the desktop rule was written to prevent.

Content on mobile is single-column full-width (minus `space.4` side padding); tables become stacked card lists rather than horizontally-scrolling tables, showing the 2-3 most important columns (e.g., an order row shows customer name, total, and status; tapping opens the full detail).

## Grid

12-column grid at desktop and tablet, 4-column at mobile, `space.6` (24px) gutters at desktop/tablet and `space.4` (16px) at mobile. Cards and form sections span whole-number column counts (4, 6, 8, 12) — never arbitrary fractional widths — so layouts stay visually aligned across a page without manual tuning per screen.