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