diff --git a/frontend/packages/agent/src/components/StatusChips.css b/frontend/packages/agent/src/components/StatusChips.css index 1b678f99..a22959b2 100644 --- a/frontend/packages/agent/src/components/StatusChips.css +++ b/frontend/packages/agent/src/components/StatusChips.css @@ -24,6 +24,17 @@ .status-chips .ui-badge { min-height: 2.75em; padding-inline: 0.8em; + /* Badge.css's base `.ui-badge` radius (`1em`) is only guaranteed to + reach a full stadium at its own compact display-only height — this + rule stretches every badge in the row (including plain, non- + interactive ones like "ctx"/"cost") to the 2.75em touch-target + floor above, well past that, so it needs the same `999px` + stadium-radius trick `.ui-badge-interactive` (Badge.css) and + `.hive-pill`/`.hive-pill-sm` (pill.css) already use — otherwise a + stretched non-interactive badge renders as a rounded rectangle + instead of a pill (mara: "badge-with-label still not pill shaped, + eg agent term ctx"). */ + border-radius: 999px; } .status-chips-last-turn { font-size: 0.8em;