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

shared badge: fix inconsistent height on glyph-carrying badges

Browse source 
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.
This commit is contained in:
iris 2026-08-30 13:27:17 +02:00
commit 3405ba2422
1 changed files with 12 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/packages/shared/src/badge/Badge.css
View file

@ -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;