From f2c5577f000e32fcdd85637f8bc4ddac52007cd0 Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 17 Jun 2026 20:35:07 +0200 Subject: [PATCH] client(tablet): equal-size drink tiles + scroll past 5 rows (#1) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User feedback (#1): drink buttons all the same size in a 3-column grid with any number of rows; scroll when more than ~5 rows of drinks exist; entry overview + sum stay visible. Device: iPad mini 2 (portrait). The grid used `grid-auto-rows: 1fr` + `overflow: hidden`, which divided the available height across however many drinks there were — tiles shrank as the catalog grew and it never scrolled (the known UX/scaling item in TODO.md). Now: `grid-auto-rows: calc((100% - 4 * var(--gap)) / 5)` — the row height is DERIVED so exactly five equal rows fill the visible grid area (no hardcoded tile pixel size), with `align-content: start` + `overflow-y: auto` (+ iOS momentum scroll). Tiles are a consistent size regardless of count, ~5 rows show, the rest scroll. The cart stays pinned below (unchanged) so the overview + sum remain permanently visible. CSS-only. --- client/src/styles.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/client/src/styles.css b/client/src/styles.css index c3fc15a..7fa8485 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -98,17 +98,23 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; } .topbar .bar-name { font-size: 26px; font-weight: 800; } .topbar .change { font-size: 17px; padding: 10px 14px; } -/* Drink grid fills available space with no scrolling — tiles auto-size to fit. - 3 columns on portrait iPad (~768px); rows divide the remaining height equally. */ +/* Drink grid: 3 equal columns. Row height is DERIVED so exactly five equal + rows fill the visible grid area (the area's height minus the four inter-row + gaps, split five ways) — no fixed tile pixel size, so tiles stay the same + size whatever the count, ~5 rows show on the portrait iPad mini, and the + rest scroll while the cart (entry overview + sum) stays pinned below. */ .grid { + --gap: 8px; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); - grid-auto-rows: 1fr; - gap: 8px; - padding: 8px; - overflow: hidden; + grid-auto-rows: calc((100% - 4 * var(--gap)) / 5); + align-content: start; + gap: var(--gap); + padding: var(--gap); + overflow-y: auto; + -webkit-overflow-scrolling: touch; } @media (max-width: 480px) {