From cf4fc5ce1c2b7796d48fa221baa5844bcb9597b2 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Mon, 25 May 2026 02:17:33 +0200
Subject: [PATCH] agent: cap icon at 5em, fix overflow menu hidden-state (#411)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/packages/agent/src/agent.css | 31 ++++++++++++++++-----------
 1 file changed, 19 insertions(+), 12 deletions(-)

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
-     `<img>` 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 <img>'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;