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; }