diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css
index 4a089fda..c99e9e39 100644
--- a/frontend/packages/agent/src/agent.css
+++ b/frontend/packages/agent/src/agent.css
@@ -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;