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

client: size picker-count buttons from content, not a fixed height

Browse source 
The fixed height: 64px had the same fragility the padding fix in the
previous commit addressed, just on the other axis. Dropped it —
height now comes from line-height + padding like any normal button.
min-height: 44px keeps the established touch-target floor (matches
.qty-btn's documented minimum elsewhere in this file) without pinning
an exact number.
This commit is contained in:
iris 2026-08-03 17:43:10 +02:00
commit b945099a85
1 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/styles.css
View file

@ -210,15 +210,22 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
gap: 8px;
}
.picker-count {
height: 64px;
/* #73: the default button padding (12px 16px) leaves ~16px of content
width per cell in this 5-column grid — workable for a single digit
("1".."5") but not the two-character "−1".."−5" remove-row labels,
which overflowed into the next cell and got visually clipped by its
opaque background. `em` (relative to this rule's own font-size,
not a fixed px) so the fix keeps working if font-size ever changes
instead of quietly re-breaking — mara's ask on the PR. Horizontal-
only, vertical spacing/centering untouched. */
opaque background. `em` padding (relative to this rule's own
font-size) rather than fixed px, so it keeps working if font-size
changes instead of quietly re-breaking.
mara: "why is the popup not just sized to match the children
directly?" — right question, the old fixed `height: 64px` was the
same fragility as the old fixed padding, just on the other axis.
Dropped it: height now comes from content (line-height) + this
padding, same as any normal button. `min-height` keeps it a floor
rather than a ceiling — this file's `.qty-btn` already documents
44px as the minimum touch target elsewhere, so that's the number
to protect, not a target to hit exactly. */
min-height: 44px;
padding: 0.46em 0.15em;
font-size: 26px;
font-weight: 800;