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

Compare commits

base: vinzenz:bec4a0080c1ff4d1755387521e326878c02721f1
Branches Tags
vinzenz:main
...
compare: vinzenz:3b900cb91002f67d216a5b2bfbba6ad1df13b7db
Branches Tags
vinzenz:main
Author SHA1 Message Date
iris
3b900cb910 tablet: derive drink-tile row floor from content, not a hardcoded px guess 
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.
 2026-07-30 09:03:40 +02:00
iris
c946ef86a6 tablet: size drink grid rows to content instead of a fixed 5-row budget 
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.
 2026-07-30 09:03:40 +02:00
iris
71c3712cbf tablet: a bit more breathing room in drink tiles 
Name/price/Pfand were packed tight (2px gap before Pfand, 1.15 line-height on
the name) — small bump to margins + line-height so tiles read less cramped
regardless of how many rows are on screen. Independent of the row-count
question raised on the issue (grid-auto-rows sizing for 5 rows vs however many
drinks are actually configured) — that's a separate, bigger call pending
confirmation of what device the screenshot was taken on.
 2026-07-30 09:03:40 +02:00
1 changed files with 18 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/src/styles.css
View file

@ -98,18 +98,27 @@ 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(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;
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(min-content, 1fr);
align-content: start;
gap: var(--gap);
padding: var(--gap);
@ -145,9 +154,9 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
font-size: 22px;
overflow: hidden;
}
.drink .name { font-weight: 800; line-height: 1.15; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
.drink .price { font-size: 22px; font-weight: 700; margin-top: 6px; }
.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 2px; }
.drink .name { font-weight: 800; line-height: 1.25; max-width: 100%; word-break: break-word; overflow-wrap: break-word; }
.drink .price { font-size: 22px; font-weight: 700; margin-top: 8px; }
.drink .pfand { font-size: 15px; font-weight: 600; color: var(--pfand); margin-top: 4px; }
.drink.pfand-return {
background: #5a2a2a;