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