vinzenz/wutzcalc
Watch
0
0
Fork
You've already forked wutzcalc
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tablet: derive drink-tile row floor from content, not a hardcoded px guess

Browse source 
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.
This commit is contained in:
iris 2026-07-29 21:44:25 +02:00 • committed by mara
commit 3b900cb910
1 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
client/src/styles.css
View file

@ -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 "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 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). 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 `minmax(min-content, 1fr)`: the floor is each row's own natural content
size used elsewhere, e.g. .bar-picker button) and, since 1fr, equal height height (name + price + Pfand at whatever font-size is active — this
and stretch to fill any leftover space when there's room for them — but already tracks the smaller mobile font sizes below with no separate
never shrink below the floor. When there are enough rows that even the number needed) rather than a guessed pixel value, and 1fr means rows are
96px floor doesn't fit the visible area, the grid keeps every row at that equal height and stretch to fill any leftover space when there's room —
floor and the whole thing scrolls (overflow-y: auto) instead of cramming but never shrink below that content-derived floor. When there are enough
rows smaller — "otherwise go for what fits". */ 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 { .grid {
--gap: 8px; --gap: 8px;
--tile-min-height: 96px;
flex: 1 1 0; flex: 1 1 0;
min-height: 0; min-height: 0;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); 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; align-content: start;
gap: var(--gap); gap: var(--gap);
padding: var(--gap); padding: var(--gap);
@ -125,7 +127,7 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
} }
@media (max-width: 480px) { @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 { padding: 8px 12px; }
.topbar .bar-name { font-size: 20px; } .topbar .bar-name { font-size: 20px; }