Compare commits

...
Author SHA1 Message Date
iris
b945099a85 client: size picker-count buttons from content, not a fixed height
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.
2026-08-03 17:43:10 +02:00
iris
e0bcfad784 client: switch picker padding to em units, not fixed px
Per feedback on #74 — fixed-px padding would silently need re-tuning
again if .picker-count's font-size ever changes. em is relative to
this rule's own font-size, so the fix scales with it automatically.
2026-08-03 17:38:08 +02:00
iris
91d14b33bb client: fix picker remove-row label clipping (#73)
.picker-count inherited the generic button's 12px/16px padding, which
left ~16px of content width per grid cell — enough for a single digit
but not the two-character "-1".."-5" remove labels added in #72,
which overflowed into the neighbouring cell and got visually clipped
by its opaque background. Tightened to horizontal-only padding (12px
4px), leaving vertical spacing/centering untouched.
2026-08-03 17:34:48 +02:00

View file

@ -210,7 +210,23 @@ 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` 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;
}