alice.pds.demo.boltless.dev
This repository has no description
web/components: keep Button one height with or without a label
The size variants' min-h values are the Figma button heights (32/36/40),
but line-height plus py-1.5 and the 1px border already exceeded them, so
the floor only ever applied to icon-only buttons. A labelled button came
out 2-5px taller than an icon-only one beside it. Dropping to py-1 keeps
content under the min-h at every size; the padding still acts as the
floor if a label wraps.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 31, 2026, 10:57 PM +0300)
commit
4a6500d2
4a6500d2cc4b51d23979583623739197bcd6a171
parent
dabd9cf3
dabd9cf397c700e1f60690a1341c9d2643a2041f
change-id
suyuoust
suyuoustynwtnwqvoxxmyrszrxkkxkyx
+8
-3
+8
-3
web/src/lib/components/ui/Button.svelte
+8
-3
web/src/lib/components/ui/Button.svelte
···
56
56
"disabled:text-foreground-warning-disabled aria-disabled:text-foreground-warning-disabled"
57
57
]
58
58
},
59
+
// the min-h is the button's real height (32/36/40 in Figma), so py has to stay
60
+
// small enough that line-height + padding + border never exceeds it — otherwise a
61
+
// button with a label grows past the min-h while an icon-only one stays on it, and
62
+
// the two render at different heights side by side. py only takes over as the
63
+
// floor when a label wraps to a second line.
59
64
size: {
60
-
sm: "min-h-8 gap-1.5 px-2 py-1.5 typography-paragraph-small",
61
-
md: "min-h-9 gap-2 px-3 py-1.5 typography-paragraph-regular",
62
-
lg: "min-h-10 gap-2.5 px-4 py-2 typography-paragraph-large"
65
+
sm: "min-h-8 gap-1.5 px-2 py-1 typography-paragraph-small",
66
+
md: "min-h-9 gap-2 px-3 py-1 typography-paragraph-regular",
67
+
lg: "min-h-10 gap-2.5 px-4 py-1 typography-paragraph-large"
63
68
},
64
69
insetShadow: {
65
70
true: "",