← All tests

Mobile-responsive POS — sell screen (prod)

Narong (2026-06-21): “can nix pos run on mobiles?” The register was a desktop two-column layout that didn’t reflow for a phone. Phase 1 makes the sell screen work on a phone in the agreed Option B style — menu scrolls on top, the cart is pinned at the bottom. Verified on get-coffee’s sister tenant lumiere at a 390×844 viewport.

Gate 2 11/11 passed + 51/51 regression. nix-cafe 86dd468, no migration. On a phone the register stacks: the product menu fills the top and scrolls, and the cart is a bounded panel pinned to the bottom (capped at 55vh, its own scroll) so the total and Pay are always on-screen. A mobile-only collapse toggle shrinks the cart to a N items · $total · Pay bar, growing the menu ~100px→~425px. The pay dialog + success modal stack to one column and scroll so Confirm / receipt actions stay reachable. The top bar now scrolls with icon-only buttons (was forcing 141px of horizontal overflow) and orders history stacks to one column (was a fixed 600px master-detail = 322px overflow). Every surface now has zero horizontal overflow at 390px; verified by a real mobile cash checkout end-to-end. On phones the multi-order tab strip becomes a slide-up order-switcher sheet (switch / new / close). Desktop is unchanged (every mobile rule gated behind md:).
Mobile POS: menu on top, cart pinned at the bottom
1 — Phone: menu scrolls on top, cart pinned at the bottom, Pay on-screen
Mobile POS with the cart collapsed to a summary bar
2 — Cart collapsed → menu grows ~4× (104px → 426px), Pay still visible
Mobile pay dialog, single column
3 — Pay dialog: single column, scrolls, Confirm reachable
Mobile success modal, stacked
4 — Success modal: stacks to one column, receipt actions reachable
Mobile order-switcher sheet
5 — Order switcher: a slide-up sheet (replaces the desktop tab strip on phones)
Mobile orders history, single column
6 — Orders history: stacks to one column (was a 600px master-detail)
Mobile close-shift dialog
7 — Close-shift dialog: fits the screen, Confirm reachable
Desktop POS two-column layout, unchanged
8 — Desktop unchanged: cart stays the right-hand column, full height