agent: meta-nav popout + header height fix + badge row consistency

mara, live review: 'the login card looks like it is behind the header',
'badges and interactive elements on same row have inconsistent size',
'the links should have the same popout as the links in the nav bar of
swarm-ui.' All three, addressed:

- Root cause of the overlap: MetaNav rendered every link inline in the
  header's title row, a variable-width list that can grow the row past
  the fixed --agent-header-h the rest of the page (position: fixed
  header, position: absolute content below it) is offset against, so
  the header visually covers whatever's underneath it once it's
  actually taller than assumed. Fix: MetaNav is now a single
  fixed-size trigger (reuses @hive/shared's Badge, icon-only, same
  shape as the header's existing overflow trigger) in the pills
  cluster, not a variable-width list in the title row. A single badge
  can't grow the row regardless of how many links the backend sends.
  Verified at 1024px/1400px (no overlap, was previously untested below
  1400px) — the deeper fragility (StatusChips' badge row itself can
  still wrap on a genuinely narrow/mobile viewport and hit the same
  class of bug) is real but predates this PR and is out of scope here.
- The popover mara asked for: same visual language as swarm-ui's own
  LinksMenu (Shell/LinksMenu.tsx) and this page's Dropdown/OverflowMenu
  — quiet icon trigger, popover on click. Not built from @hive/shared's
  Dropdown itself (its items are always <button>s for command dispatch,
  which would lose real <a> link semantics — ctrl/middle-click, copy
This commit is contained in:
iris 2026-08-28 22:04:52 +02:00
commit 3ce961e5bd
5 changed files with 152 additions and 43 deletions

View file

@ -0,0 +1,42 @@
/* <MetaNav> popover matches `@hive/shared`'s `Dropdown` (`.ui-dropdown`)
values exactly (background/border/radius/shadow, item padding/hover),
same "reuse the values, not the component" call `.login-card`
(LoginFlow.css) already made, for the same reason: this popover's
items are real `<a>` tags, not `Dropdown`'s command-dispatch
`<button>`s. Right-anchored, same as OverflowMenu.css's
`.header-overflow-anchor` MetaNav sits in the same right-hand
pills cluster, so a left anchor would push it off-screen the same
way. */
.meta-nav-anchor {
position: relative;
display: inline-block;
}
.meta-nav-popover {
position: absolute;
top: calc(100% + 0.25em);
right: 0;
left: auto;
z-index: 20;
display: flex;
flex-direction: column;
min-width: 10em;
padding: 0.25em;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 0.5em;
box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
}
.meta-nav-item {
display: flex;
align-items: center;
gap: 0.5em;
min-height: 2.75em;
padding: 0.4em 0.7em;
border-radius: 0.35em;
color: var(--fg);
text-decoration: none;
white-space: nowrap;
}
.meta-nav-item:hover {
background: var(--border);
}