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

shared/badge: give interactive badges a real pill radius, not a roundrect

Browse source 
mara: "make clickable badges a proper pill not a roundrect" (#4276).

.ui-badge's base border-radius: 1em is a genuine pill at its own
compact display-only height, but .ui-badge-interactive's min-height:
2.75em (the WCAG 2.5.5 touch-target floor) makes an interactive badge
tall enough that the fixed 1em radius no longer reaches half the box's
height -- the corners round without the sides ever meeting the same
curve, i.e. a rounded rectangle. border-radius: 999px is the standard
stadium-shape trick (the browser clamps it to exactly half the box's
height whenever it exceeds it), same value .hive-pill/.hive-pill-sm
already use. Shared component -- fixes every interactive Badge caller
(swarm-ui's WantedMenu/AgentCard/model-effort pickers, the per-agent
page's StatusChips/MetaNav/HeaderPill) in one place.

Verified with a real headless-chromium screenshot of the /components
Badge section before/after: the interactive "model sonnet"/"pause"
badges were visibly rectangular with rounded corners before this,
matching the non-interactive display badges' pill shape after.
This commit is contained in:
iris 2026-09-11 22:45:36 +02:00
commit f263f82047
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

@ -61,10 +61,22 @@
-webkit-backdrop-filter: blur(6px) saturate(140%);
backdrop-filter: blur(6px) saturate(140%);
}
/* The base `.ui-badge` rule's `border-radius: 1em` is a genuine pill at
its own compact display-only height, but `min-height: 2.75em` below
(the WCAG 2.5.5 touch-target floor) makes an *interactive* badge tall
enough that a fixed 1em radius no longer reaches half the box's
height — the corners round without the sides ever meeting the same
curve, i.e. a rounded rectangle, not a pill (mara: "make clickable
badges a proper pill not a roundrect"). `999px` is the standard
stadium-shape trick — a radius the browser clamps to exactly half the
box's height whenever it exceeds it, so it reads as a true pill at
any height instead of one tuned for a specific one. Same value
`.hive-pill`/`.hive-pill-sm` (`shared/src/pill.css`) already use. */
.ui-badge-interactive {
cursor: pointer;
min-height: 2.75em;
padding-inline: 0.8em;
border-radius: 999px;
}
.ui-badge-interactive:hover {
background: var(--border);