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

tablet: size drink grid rows to content instead of a fixed 5-row budget

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

21
client/src/styles.css
View file

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