42 lines
1.8 KiB
CSS
42 lines
1.8 KiB
CSS
/* <StatusChips> layout. Colours all come from Badge/Dropdown's own CSS
|
|
(@hive/shared) — nothing here overrides a base16 slot. */
|
|
.status-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
.status-chip-anchor {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
/* mara, live, on a screenshot of this row: "badges and interactive
|
|
elements on same row have inconsistent size." Real cause: Badge.css's
|
|
`.ui-badge-interactive` grows to a 2.75em WCAG touch-target floor
|
|
(model/effort pickers, pause) while a plain display `<span>` badge
|
|
(alive, state, ctx, cost — no `onClick`) stays compact, so the row
|
|
reads as two different pill sizes even though every badge here is
|
|
the same `<Badge>` component. Scoped to this row rather than
|
|
Badge.css itself — display-only badges elsewhere (e.g. the dashboard)
|
|
have no reason to grow, this is specifically about badges and
|
|
buttons sitting side by side in one row needing to read as one
|
|
family. */
|
|
.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;
|
|
color: var(--muted);
|
|
}
|