From c946ef86a645a42f5b0124becb562d06dc9fdd3f Mon Sep 17 00:00:00 2001
From: iris <vinzenz.f.s@gmail.com>
Date: Wed, 29 Jul 2026 21:36:18 +0200
Subject: [PATCH] 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; }