From 3405ba24225644adb6f0dd71fbbb3d118cc7c68d Mon Sep 17 00:00:00 2001 From: iris Date: Sun, 30 Aug 2026 13:27:17 +0200 Subject: [PATCH] shared badge: fix inconsistent height on glyph-carrying badges mara: 'thinking badge size is bigger for some reason'. Several badges fold a leading glyph straight into their value text (STATE_LABELS' emoji in Root.tsx, the pause/resume glyphs) rather than using Badge's dedicated icon prop, and an emoji's (or its tofu fallback's) own line-box commonly exceeds the surrounding text's line-height: 1.4 in most fonts, inflating just that badge's height against its siblings. Fix: line-height: 1 on .ui-badge-value forces every badge back to the same box regardless of which glyph a given state happens to carry. Verified with a real headless-chromium repro of the exact thinking/ pause height mismatch from her screenshot, before and after. --- frontend/packages/shared/src/badge/Badge.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css index d1fff96b..14cc9582 100644 --- a/frontend/packages/shared/src/badge/Badge.css +++ b/frontend/packages/shared/src/badge/Badge.css @@ -90,6 +90,18 @@ } .ui-badge-value { color: var(--fg); + /* mara: "thinking badge size is bigger for some reason" — several + badges fold a leading glyph straight into their value text + (STATE_LABELS' emoji, the pause/resume "⏸"/"▶"), and an emoji's + (or its tofu fallback's) own line-box commonly exceeds the + surrounding text's `line-height: 1.4` in most fonts, inflating + just that badge's height against its siblings. A tight + `line-height: 1` on the value span forces every badge back to the + same box regardless of which glyph a specific state happens to + carry — verified with a real headless-chromium repro of the exact + "thinking"/"pause" mismatch from her screenshot, both before and + after. */ + line-height: 1; } .ui-badge-caret { font-size: 0.75em;