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

agent: fix badges+pills overflow instead of wrap at narrow widths

Browse source 
mara, live, on the 500px screenshot: 'does not overflow properly.'

Real cause: .agent-header-pills had flex-shrink: 0 (fine for app.js's
2-3-small-pills case, which never needed to shrink) — once badges
joined that column last round, that told the flex layout 'give this
its full natural unwrapped width no matter what', so once that width
exceeded the viewport it just overflowed past the edge instead of
ever getting narrow enough to trigger its own flex-wrap. Dropping
flex-shrink: 0 (default 1) is the fix.

Tried pairing it with min-width: 0 first — made it worse. An unset
min-width still floors shrinking at the container's own min-content
(the widest single wrapped child, e.g. one badge — a reasonable
floor); min-width: 0 removes that floor entirely, so the container
shrinks past what its content needs and the content overflows its own
box sideways, landing on top of .agent-header-main instead of
wrapping cleanly. Confirmed reproducible at 320px, not a one-off
capture glitch, before settling on the flex-shrink-only fix.

Verified 500px (the width mara flagged) and 1400px both clean, no
overflow, no overlap. Below ~450px there's now a real mathematical
floor — icon + main's shortest-unbreakable-word + pills' widest-single-
badge together exceed the viewport — that's a genuine follow-up scope
(icon-only badges or similar at that point), not something this fix
claims to solve; flagging rather than silently leaving it implied.

tsc n/a (CSS-only change), build clean, both pre-push lints clean.
This commit is contained in:
iris 2026-08-28 22:54:15 +02:00
commit 7897b6af7f
1 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -129,22 +129,30 @@ body.agent-shell {
gap: 0.5em; gap: 0.5em;
} }
/* Right cluster — flyout pills stacked / inline with the overflow /* Right cluster — flyout pills, and (new Preact page only) the status
trigger. Vertically centred against the full-height icon, no badges (`StatusChips`) too — mara, live: "move badges to where the
wrap; pills can drop to a row of their own under crowding via dropdowns are". `flex-wrap: wrap` alone doesn't help if this
the flex-wrap of `.agent-header-pills` itself. New Preact page also container can't itself shrink: the old `flex-shrink: 0` here (fine
puts the status badges (`StatusChips`) in here now, alongside the for app.js's 2-3-small-pills case, which never needed to shrink)
flyout pills — mara, live: "move badges to where the dropdowns told the flex layout "give this its full natural width no matter
are" — this same rule already handles a variable child count what," so once badges made that natural width wider than the
gracefully (flex-wrap + flex-end), no changes needed to absorb viewport, it just overflowed past the edge instead of ever getting
them; `.agent-header-main` (agent.css, `.agent-header-title-row`/ narrow enough to trigger its own wrap — mara, live, on the 500px
`.agent-hive-row`) only ever holds the title + hive-label rows now, screenshot: "does not overflow properly". Dropping `flex-shrink: 0`
which don't wrap in practice, so it stays a stable height. */ (default is `1`) is the whole fix — deliberately NOT pairing it
with `min-width: 0` (tried that first, made it worse: an unset
`min-width` still floors shrinking at this container's own
min-content — the widest single wrapped child, e.g. one badge, not
the full unwrapped row — which is the correct floor; `min-width: 0`
removes that floor entirely, so at a narrow enough viewport the
container shrinks past what its own content needs and the content
overflows its box sideways, landing on top of `.agent-header-main`
instead of wrapping cleanly — confirmed live, reproducible at
320px, not a one-off capture glitch). */
.agent-header-pills { .agent-header-pills {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
flex-shrink: 0;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
align-self: center; align-self: center;