ui: fit menu dropdowns to their contents (#92)

Author: benvinegar

src/ui/App.tsx

@@ -929,6 +929,7 @@ function AppShell({
             activeMenuItemIndex={activeMenuItemIndex}
             activeMenuSpec={activeMenuSpec}
             activeMenuWidth={activeMenuWidth}
+            terminalWidth={terminal.width}
             theme={activeTheme}
             onHoverItem={setActiveMenuItemIndex}
             onSelectItem={(entry) => {

src/ui/components/chrome/MenuDropdown.tsx

@@ -39,6 +39,7 @@ export function MenuDropdown({
   activeMenuItemIndex,
   activeMenuSpec,
   activeMenuWidth,
+  terminalWidth,
   theme,
   onHoverItem,
   onSelectItem,
@@ -48,17 +49,21 @@ export function MenuDropdown({
   activeMenuItemIndex: number;
   activeMenuSpec: MenuSpec;
   activeMenuWidth: number;
+  terminalWidth: number;
   theme: AppTheme;
   onHoverItem: (index: number) => void;
   onSelectItem: (entry: Extract<MenuEntry, { kind: "item" }>) => void;
 }) {
+  const clampedWidth = Math.min(activeMenuWidth, Math.max(22, terminalWidth - 2));
+  const clampedLeft = Math.max(1, Math.min(activeMenuSpec.left, terminalWidth - clampedWidth - 1));
+
   return (
     <box
       style={{
         position: "absolute",
         top: 1,
-        left: activeMenuSpec.left,
-        width: activeMenuWidth,
+        left: clampedLeft,
+        width: clampedWidth,
         height: activeMenuEntries.length + 2,
         zIndex: 40,
         border: true,
@@ -73,9 +78,7 @@ export function MenuDropdown({
             key={`${activeMenuId}:separator:${index}`}
             style={{ height: 1, paddingLeft: 1, paddingRight: 1 }}
           >
-            <text fg={theme.border}>
-              {padText("-".repeat(activeMenuWidth - 4), activeMenuWidth - 2)}
-            </text>
+            <text fg={theme.border}>{padText("-".repeat(clampedWidth - 4), clampedWidth - 2)}</text>
           </box>
         ) : (
           <box
@@ -90,7 +93,7 @@ export function MenuDropdown({
             onMouseOver={() => onHoverItem(index)}
             onMouseUp={() => onSelectItem(entry)}
           >
-            {renderMenuLine(entry, activeMenuWidth - 2, theme, activeMenuItemIndex === index)}
+            {renderMenuLine(entry, clampedWidth - 2, theme, activeMenuItemIndex === index)}
           </box>
         ),
       )}

src/ui/components/chrome/menu.ts

@@ -70,11 +70,11 @@ function menuEntryText(entry: Extract<MenuEntry, { kind: "item" }>) {
   return `${check}${entry.label}${hint}`;
 }
 
-/** Compute a dropdown width that fits its longest entry with a small floor. */
+/** Compute a dropdown content width that fits its longest entry with a little breathing room. */
 export function menuWidth(entries: MenuEntry[]) {
   return Math.max(
-    18,
-    ...entries.map((entry) => (entry.kind === "separator" ? 6 : menuEntryText(entry).length)),
+    20,
+    ...entries.map((entry) => (entry.kind === "separator" ? 6 : menuEntryText(entry).length + 2)),
   );
 }
 

test/ui-components.test.tsx

@@ -593,6 +593,7 @@ describe("UI components", () => {
         activeMenuItemIndex={0}
         activeMenuSpec={{ id: "view", left: 2, width: 6, label: "View" }}
         activeMenuWidth={24}
+        terminalWidth={30}
         theme={theme}
         onHoverItem={() => {}}
         onSelectItem={() => {}}
@@ -613,6 +614,33 @@ describe("UI components", () => {
     expect(frame).toContain("m");
   });
 
+  test("MenuDropdown repositions wide menus to stay inside the terminal", async () => {
+    const theme = resolveTheme("midnight", null);
+    const frame = await captureFrame(
+      <MenuDropdown
+        activeMenuId="agent"
+        activeMenuEntries={[
+          { kind: "item", label: "Next annotated file", action: () => {} },
+          { kind: "item", label: "Previous annotated file", action: () => {} },
+        ]}
+        activeMenuItemIndex={0}
+        activeMenuSpec={{ id: "agent", left: 22, width: 7, label: "Agent" }}
+        activeMenuWidth={30}
+        terminalWidth={34}
+        theme={theme}
+        onHoverItem={() => {}}
+        onSelectItem={() => {}}
+      />,
+      34,
+      6,
+    );
+
+    expect(frame).toContain("Next annotated file");
+    expect(frame).toContain("Previous annotated file");
+    expect(frame).toContain("┐");
+    expect(frame).toContain("┘");
+  });
+
   test("StatusBar renders filter mode affordance", async () => {
     const theme = resolveTheme("midnight", null);
     const frame = await captureFrame(