diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css index 4328ac1..cd91696 100644 --- a/frontend/packages/agent/src/agent.css +++ b/frontend/packages/agent/src/agent.css @@ -140,15 +140,16 @@ h2, h3 { text-shadow: 0 0 8px rgba(203, 166, 247, 0.4); } .agent-icon { - /* Full-height square identity anchor (#394 — mara's spec). The - `align-items: stretch` on .agent-header stretches the icon's - `` box; `aspect-ratio: 1` keeps it square; `height: 100%` - makes it follow the header's actual height through resizes / - wrap. width:auto + aspect-ratio derives the width from height. */ - height: 100%; - width: auto; - aspect-ratio: 1; + /* Square identity anchor (#394 — mara's spec). Explicit em sizing + so the 's intrinsic (large) dimensions don't push the + parent flex container open via `align-items: stretch`-driven + height feedback. Width = header content area (header min-h 6em + - 2 × 0.5em padding ≈ 5em). Sticks to the top so a state-row + wrap doesn't drag the icon down with it. (#411) */ + width: 5em; + height: 5em; flex-shrink: 0; + align-self: flex-start; border-radius: 8px; box-shadow: 0 0 18px -2px rgba(203, 166, 247, 0.4); object-fit: cover; @@ -201,7 +202,16 @@ h2, h3 { /* Overflow popover — rebuild + new-session (and the dashboard 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 { position: fixed; background: var(--agent-frost-bg); @@ -210,9 +220,6 @@ h2, h3 { border: 1px solid var(--purple-dim); border-radius: 6px; padding: 0.35em; - display: flex; - flex-direction: column; - gap: 0.15em; z-index: 40; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); min-width: 14em;