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

agent: badges join the pills cluster, not the other way around

Browse source 
mara, live, correcting the prior round: 'oh i meant move badges to
where the dropdowns are not the other way around. this way the height
does not change even on widescreen.'

Prior commit nested pills INTO a new row inside .agent-header-main
(badges + pills sharing a row under the title). Backwards from what
she wanted: badges now join .agent-header-pills instead — the same
header-level column pills already lived in, which already handles a
variable child count via flex-wrap + justify-content: flex-end.
.agent-header-main goes back to just the title + hive-label rows,
which don't wrap in practice, so its height stays stable regardless of
how many badges/pills are showing.

The ResizeObserver dynamic-height fix from the prior commit is
untouched and still does the real work of keeping .agent-status-
overlay's offset correct if anything does wrap — this is a pure
layout-preference change on top of that, not a new bugfix.

Verified at 500/1024/1400px — badges+pills form one right-aligned
cluster next to the title, no overlap, no ResizeObserver console
error. tsc --noEmit clean, build clean, both pre-push lints clean.
This commit is contained in:
iris 2026-08-28 22:47:49 +02:00
commit d7e70fd195
2 changed files with 35 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/packages/agent/src/agent.css
View file

@ -128,24 +128,18 @@ body.agent-shell {
margin: 0;
gap: 0.5em;
}
/* New Preact page only: `Header.tsx` nests `.agent-header-pills`
INSIDE `.agent-state-row` (badges + pills sharing one row — mara,
live: "can we put the badges on the same row as the links button
etc? then the header would be more compact"), unlike the old
app.js markup where `.agent-header-pills` is a separate header-
level column (index.html line ~54). Scoped as a descendant
selector so it only fires for that nesting — app.js's own
still-live 3-column layout below is untouched. Pushes the pills
cluster to the row's right edge; badges (`children`, rendered
first) fill the space to its left. */
.agent-state-row .agent-header-pills {
margin-left: auto;
}
/* Right cluster — flyout pills stacked / inline with the overflow
trigger. Vertically centred against the full-height icon, no
wrap; pills can drop to a row of their own under crowding via
the flex-wrap of `.agent-header-pills` itself. */
the flex-wrap of `.agent-header-pills` itself. New Preact page also
puts the status badges (`StatusChips`) in here now, alongside the
flyout pills — mara, live: "move badges to where the dropdowns
are" — this same rule already handles a variable child count
gracefully (flex-wrap + flex-end), no changes needed to absorb
them; `.agent-header-main` (agent.css, `.agent-header-title-row`/
`.agent-hive-row`) only ever holds the title + hive-label rows now,
which don't wrap in practice, so it stays a stable height. */
.agent-header-pills {
display: flex;
align-items: center;