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: 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;
}
/* 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. 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. */
/* Right cluster — flyout pills, and (new Preact page only) the status
badges (`StatusChips`) too — mara, live: "move badges to where the
dropdowns are". `flex-wrap: wrap` alone doesn't help if this
container can't itself shrink: the old `flex-shrink: 0` here (fine
for app.js's 2-3-small-pills case, which never needed to shrink)
told the flex layout "give this its full natural width no matter
what," so once badges made that natural width wider than the
viewport, it just overflowed past the edge instead of ever getting
narrow enough to trigger its own wrap — mara, live, on the 500px
screenshot: "does not overflow properly". Dropping `flex-shrink: 0`
(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 {
display: flex;
align-items: center;
gap: 0.5em;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
align-self: center;