From 4a6500d2cc4b51d23979583623739197bcd6a171 Mon Sep 17 00:00:00 2001 From: eti Date: Thu, 30 Jul 2026 18:57:50 +0200 Subject: [PATCH] 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 --- web/src/lib/components/ui/Button.svelte | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte index a75c4dc9..0e4cd059 100644 --- a/web/src/lib/components/ui/Button.svelte +++ b/web/src/lib/components/ui/Button.svelte @@ -56,10 +56,15 @@ "disabled:text-foreground-warning-disabled aria-disabled:text-foreground-warning-disabled" ] }, + // the min-h is the button's real height (32/36/40 in Figma), so py has to stay + // small enough that line-height + padding + border never exceeds it — otherwise a + // button with a label grows past the min-h while an icon-only one stays on it, and + // the two render at different heights side by side. py only takes over as the + // floor when a label wraps to a second line. size: { - sm: "min-h-8 gap-1.5 px-2 py-1.5 typography-paragraph-small", - md: "min-h-9 gap-2 px-3 py-1.5 typography-paragraph-regular", - lg: "min-h-10 gap-2.5 px-4 py-2 typography-paragraph-large" + sm: "min-h-8 gap-1.5 px-2 py-1 typography-paragraph-small", + md: "min-h-9 gap-2 px-3 py-1 typography-paragraph-regular", + lg: "min-h-10 gap-2.5 px-4 py-1 typography-paragraph-large" }, insetShadow: { true: "", -- 2.51.2