cmux-next: size the composer plus menu to content

Packages/macOS/CmuxNext/Sources/CmuxNextAgentPane/Resources/agent-pane/index.html

@@ -2133,7 +2133,7 @@
 .acpmux-send{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--agent-highlight,var(--agent-text));color:var(--agent-highlight-text,var(--acpmux-base))}
 .acpmux-send:not(.acpmux-send-ready):not(.acpmux-cancel):not(:hover){background:color-mix(in srgb,var(--agent-highlight,var(--agent-text)) 72%,var(--acpmux-base))}
 /* The picker menus open above the field at their chip (useUiAnchor). The chip is their containing block, so the width comes from the rows and the viewport, never the chip. */
-.acpmux-menu{font:13px/18px -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;font-size:14px;position:absolute;bottom:calc(100% + 6px);z-index:3;width:max-content;min-width:min(220px,calc(100vw - 16px));max-width:min(420px,calc(100vw - 16px));max-height:min(360px,50vh);overflow:auto;padding:6px;box-sizing:border-box;border-radius:12px;background:var(--acpmux-menu-bg);box-shadow:inset 0 0 0 .5px var(--acpmux-composer-edge),0 10px 30px var(--agent-shadow,rgb(0 0 0/.35));color:var(--agent-text);line-height:18px}
+.acpmux-menu{font:13px/18px -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;font-size:14px;position:absolute;bottom:calc(100% + 6px);z-index:3;width:max-content;min-width:min(220px,calc(100vw - 16px));max-width:min(420px,calc(100vw - 16px));height:auto;max-height:min(360px,50vh);overflow-x:hidden;overflow-y:auto;padding:6px;box-sizing:border-box;border-radius:12px;background:var(--acpmux-menu-bg);box-shadow:inset 0 0 0 .5px var(--acpmux-composer-edge),0 10px 30px var(--agent-shadow,rgb(0 0 0/.35));color:var(--agent-text);line-height:18px}
 /* The picker menus open above the field, aligned with its edges. */
 .acpmux-menu-start{left:0}
 .acpmux-menu-end{right:0}

webviews/test/anchor.test.ts

@@ -4,6 +4,7 @@ import { act, createElement, useRef, useState } from "react";
 import { resolveUiOverlayPosition, useUiAnchor, UI_ANCHOR_GAP, type UiAnchorSide } from "../src/ui/anchor";
 
 const menuCases: Array<{ name: string; side: UiAnchorSide }> = [
+  { name: "composer-plus", side: "above" },
   { name: "composer-computer", side: "below" },
   { name: "composer-folder", side: "above" },
   { name: "model", side: "above" },
@@ -26,7 +27,7 @@ const menuGeometry = new Map(
         right: 160 + index * 24,
         bottom: entry.side === "above" ? 392 : 132,
       },
-      overlay: { width: 180, height: 100 },
+      overlay: entry.name === "composer-plus" ? { width: 220, height: 160 } : { width: 180, height: 100 },
     },
   ]),
 );
@@ -199,6 +200,11 @@ describe("anchored overlay placement", () => {
           : geometry.anchor.top - UI_ANCHOR_GAP - geometry.overlay.height;
       expect(Math.abs(Number.parseFloat(overlay.style.left) - expectedLeft)).toBeLessThanOrEqual(2);
       expect(Math.abs(Number.parseFloat(overlay.style.top) - expectedTop)).toBeLessThanOrEqual(2);
+      if (entry.name === "composer-plus") {
+        const trigger = dom.window.document.querySelector<HTMLButtonElement>(`[data-menu-trigger="${entry.name}"]`)!;
+        expect(overlay.getBoundingClientRect().width).toBeGreaterThan(trigger.getBoundingClientRect().width);
+        expect(overlay.getBoundingClientRect().height).toBeLessThanOrEqual(360);
+      }
     }
   });
 });