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

client(tablet): equal-size drink tiles + scroll past 5 rows (#1)

Browse source 
User feedback (#1): drink buttons all the same size in a 3-column grid with
any number of rows; scroll when more than ~5 rows of drinks exist; entry
overview + sum stay visible. Device: iPad mini 2 (portrait).

The grid used `grid-auto-rows: 1fr` + `overflow: hidden`, which divided the
available height across however many drinks there were — tiles shrank as the
catalog grew and it never scrolled (the known UX/scaling item in TODO.md).

Now: `grid-auto-rows: calc((100% - 4 * var(--gap)) / 5)` — the row height is
DERIVED so exactly five equal rows fill the visible grid area (no hardcoded
tile pixel size), with `align-content: start` + `overflow-y: auto` (+ iOS
momentum scroll). Tiles are a consistent size regardless of count, ~5 rows
show, the rest scroll. The cart stays pinned below (unchanged) so the overview
+ sum remain permanently visible.

CSS-only.
This commit is contained in:
iris 2026-06-17 20:35:07 +02:00
commit f2c5577f00
1 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/styles.css
View file

@ -98,17 +98,23 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
.topbar .bar-name { font-size: 26px; font-weight: 800; }
.topbar .change { font-size: 17px; padding: 10px 14px; }
/* Drink grid fills available space with no scrolling — tiles auto-size to fit.
3 columns on portrait iPad (~768px); rows divide the remaining height equally. */
/* 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. */
.grid {
--gap: 8px;
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 8px;
padding: 8px;
overflow: hidden;
grid-auto-rows: calc((100% - 4 * var(--gap)) / 5);
align-content: start;
gap: var(--gap);
padding: var(--gap);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) {