From f263f82047badb4c2ee7121875635010a041868a Mon Sep 17 00:00:00 2001 From: iris Date: Fri, 11 Sep 2026 22:45:36 +0200 Subject: [PATCH] shared/badge: give interactive badges a real pill radius, not a roundrect 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. --- 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 ca8516f9..784b201e 100644 --- a/frontend/packages/shared/src/badge/Badge.css +++ b/frontend/packages/shared/src/badge/Badge.css @@ -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);