vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

agent: cap icon at 5em, fix overflow menu hidden-state (#411)

Browse source 
Two regressions from #394 that landed once mara deployed:

1. **Icon way too big** — `.agent-icon { height: 100%; aspect-ratio: 1 }`
   sized off the parent's height. With `align-items: stretch` on the
   header and `min-height: 6em`, the `<img>`'s intrinsic dimensions
   fed back into the flex container's height calculation and pushed
   the header (and the icon stretched to fill it) far past 6em — the
   icon ended up dominating the page.

   Switch to explicit `width: 5em; height: 5em` (header content area
   = 6em min-h - 2 × 0.5em padding). `align-self: flex-start` so a
   state-row wrap doesn't drag the icon down with it.

2. **Overflow menu always visible** — `.overflow-menu { display: flex }`
   in author CSS overrode the `[hidden]` UA rule (`[hidden]
   { display: none }` has the same specificity). With nothing hiding
   it, the menu rendered at viewport 0,0 by default (no top/left set
   on the popover until JS opens it), so the operator saw `↑ dashboard
   / ↻ rebuild container / ↻ new claude session` stacked at the
   top-left of every page load.

   Split the rule: `.overflow-menu` keeps the chrome (frosted bg,
   position fixed, z-index, border, padding); `.overflow-menu:not([hidden])`
   carries `display: flex`. Now `[hidden]` wins when set, no menu
   shown until the trigger opens it.

agent.css 22.4kb → 22.5kb.
This commit is contained in:
iris 2026-05-25 02:17:33 +02:00 • committed by Mara
parent 918dccfedd
commit cf4fc5ce1c
1 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -140,15 +140,16 @@ h2, h3 {
text-shadow: 0 0 8px rgba(203, 166, 247, 0.4); text-shadow: 0 0 8px rgba(203, 166, 247, 0.4);
} }
.agent-icon { .agent-icon {
/* Full-height square identity anchor (#394 — mara's spec). The /* Square identity anchor (#394 — mara's spec). Explicit em sizing
`align-items: stretch` on .agent-header stretches the icon's so the <img>'s intrinsic (large) dimensions don't push the
`<img>` box; `aspect-ratio: 1` keeps it square; `height: 100%` parent flex container open via `align-items: stretch`-driven
makes it follow the header's actual height through resizes / height feedback. Width = header content area (header min-h 6em
wrap. width:auto + aspect-ratio derives the width from height. */ - 2 × 0.5em padding ≈ 5em). Sticks to the top so a state-row
height: 100%; wrap doesn't drag the icon down with it. (#411) */
width: auto; width: 5em;
aspect-ratio: 1; height: 5em;
flex-shrink: 0; flex-shrink: 0;
align-self: flex-start;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 18px -2px rgba(203, 166, 247, 0.4); box-shadow: 0 0 18px -2px rgba(203, 166, 247, 0.4);
object-fit: cover; object-fit: cover;
@ -201,7 +202,16 @@ h2, h3 {
/* Overflow popover — rebuild + new-session (and the dashboard /* Overflow popover — rebuild + new-session (and the dashboard
back-link, prepended in app.js setHeader). Positioned in JS so back-link, prepended in app.js setHeader). Positioned in JS so
the menu's top-right corner anchors under the trigger button. */ the menu's top-right corner anchors under the trigger button.
`:not([hidden])` scoping (#411): the `[hidden]` HTML attribute
sets `display: none` via the UA stylesheet, but author CSS's
`display: flex` would override that. Scope display rules so
they apply only when the menu is unhidden. */
.overflow-menu:not([hidden]) {
display: flex;
flex-direction: column;
gap: 0.15em;
}
.overflow-menu { .overflow-menu {
position: fixed; position: fixed;
background: var(--agent-frost-bg); background: var(--agent-frost-bg);
@ -210,9 +220,6 @@ h2, h3 {
border: 1px solid var(--purple-dim); border: 1px solid var(--purple-dim);
border-radius: 6px; border-radius: 6px;
padding: 0.35em; padding: 0.35em;
display: flex;
flex-direction: column;
gap: 0.15em;
z-index: 40; z-index: 40;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
min-width: 14em; min-width: 14em;