From 71c3712cbfdb7d227d64a0c2690b3ed7da5c5bff Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 29 Jul 2026 21:32:34 +0200 Subject: [PATCH 1/3] tablet: a bit more breathing room in drink tiles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Name/price/Pfand were packed tight (2px gap before Pfand, 1.15 line-height on the name) — small bump to margins + line-height so tiles read less cramped regardless of how many rows are on screen. Independent of the row-count question raised on the issue (grid-auto-rows sizing for 5 rows vs however many drinks are actually configured) — that's a separate, bigger call pending confirmation of what device the screenshot was taken on. --- client/src/styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/styles.css b/client/src/styles.css index ddf5932..eb79498 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -145,9 +145,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; } font-size: 22px; overflow: hidden; } -.drink .name { font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; overflow-wrap: break-word; } -.drink .price { font-size: 22px; font-weight: 700; margin-top: 6px; } -.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 2px; } +.drink .name { font-weight: 800; line-height: 1.25; max-width: 100%; word-break: break-word; overflow-wrap: break-word; } +.drink .price { font-size: 22px; font-weight: 700; margin-top: 8px; } +.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 4px; } .drink.pfand-return { background: #5a2a2a; From c946ef86a645a42f5b0124becb562d06dc9fdd3f Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 29 Jul 2026 21:36:18 +0200 Subject: [PATCH 2/3] tablet: size drink grid rows to content instead of a fixed 5-row budget MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per review: remove the assumption that exactly 5 rows fill the visible area. grid-auto-rows: minmax(96px, 1fr) — rows are at least 96px (the touch-target size used elsewhere in this file), equal height, and stretch evenly to fill leftover space when there's room; when there isn't (more rows than fit), every row stays at the 96px floor and the grid scrolls instead of shrinking rows to squeeze them in. Smaller floor (80px) in the <=480px media query to match the already-smaller mobile font sizes there. --- client/src/styles.css | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/client/src/styles.css b/client/src/styles.css index eb79498..16a1af5 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -98,18 +98,25 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; } .topbar .bar-name { font-size: 26px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .change { font-size: 17px; padding: 10px 14px; } -/* 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. */ +/* Drink grid: 3 equal columns. Rows no longer assume a fixed count (the old + "exactly 5 rows fill the area" formula squeezed every row into 1/5 of the + height regardless of how many rows actually existed — 4 rows of drinks + looked cramped, with a wasted empty row's worth of space below them). + `minmax(96px, 1fr)`: rows are at least 96px tall (matches the touch-target + size used elsewhere, e.g. .bar-picker button) and, since 1fr, equal height + and stretch to fill any leftover space when there's room for them — but + never shrink below the floor. When there are enough rows that even the + 96px floor doesn't fit the visible area, the grid keeps every row at that + floor and the whole thing scrolls (overflow-y: auto) instead of cramming + rows smaller — "otherwise go for what fits". */ .grid { --gap: 8px; + --tile-min-height: 96px; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); - grid-auto-rows: calc((100% - 4 * var(--gap)) / 5); + grid-auto-rows: minmax(var(--tile-min-height), 1fr); align-content: start; gap: var(--gap); padding: var(--gap); @@ -118,7 +125,7 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; } } @media (max-width: 480px) { - .grid { grid-template-columns: repeat(2, 1fr); } + .grid { grid-template-columns: repeat(2, 1fr); --tile-min-height: 80px; } .topbar { padding: 8px 12px; } .topbar .bar-name { font-size: 20px; } From 3b900cb91002f67d216a5b2bfbba6ad1df13b7db Mon Sep 17 00:00:00 2001 From: iris Date: Wed, 29 Jul 2026 21:44:25 +0200 Subject: [PATCH 3/3] tablet: derive drink-tile row floor from content, not a hardcoded px guess MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per review: don't hardcode pixel values. grid-auto-rows: minmax(min-content, 1fr) — the floor is each row's own natural content height (name + price + Pfand at whatever font-size is active), not a manually guessed number. Same mechanism naturally covers the <=480px breakpoint's smaller fonts too, so the separate --tile-min-height custom property + its mobile override are gone — one rule, no magic numbers on either side. --- client/src/styles.css | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/client/src/styles.css b/client/src/styles.css index 16a1af5..f1f1d9c 100644 --- a/client/src/styles.css +++ b/client/src/styles.css @@ -102,21 +102,23 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; } "exactly 5 rows fill the area" formula squeezed every row into 1/5 of the height regardless of how many rows actually existed — 4 rows of drinks looked cramped, with a wasted empty row's worth of space below them). - `minmax(96px, 1fr)`: rows are at least 96px tall (matches the touch-target - size used elsewhere, e.g. .bar-picker button) and, since 1fr, equal height - and stretch to fill any leftover space when there's room for them — but - never shrink below the floor. When there are enough rows that even the - 96px floor doesn't fit the visible area, the grid keeps every row at that - floor and the whole thing scrolls (overflow-y: auto) instead of cramming - rows smaller — "otherwise go for what fits". */ + `minmax(min-content, 1fr)`: the floor is each row's own natural content + height (name + price + Pfand at whatever font-size is active — this + already tracks the smaller mobile font sizes below with no separate + number needed) rather than a guessed pixel value, and 1fr means rows are + equal height and stretch to fill any leftover space when there's room — + but never shrink below that content-derived floor. When there are enough + rows that even their natural height doesn't fit the visible area, the + grid holds every row at that floor and the whole thing scrolls + (overflow-y: auto) instead of cramming rows smaller — "otherwise go for + what fits". */ .grid { --gap: 8px; - --tile-min-height: 96px; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); - grid-auto-rows: minmax(var(--tile-min-height), 1fr); + grid-auto-rows: minmax(min-content, 1fr); align-content: start; gap: var(--gap); padding: var(--gap); @@ -125,7 +127,7 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; } } @media (max-width: 480px) { - .grid { grid-template-columns: repeat(2, 1fr); --tile-min-height: 80px; } + .grid { grid-template-columns: repeat(2, 1fr); } .topbar { padding: 8px 12px; } .topbar .bar-name { font-size: 20px; }