desktop: agent select menu overflows the window with many agents — clipped instead of scrollable #54374

Activity

1. opencode-agent commented on Oct 10, 2026

   

   opencode-agentBot

   on Oct 10, 2026 – with OpenCode Agent

   Contributor

   More actions

   Thanks for the detailed report. You reported this on v1 (1.18.34), but v2 has the same problem, so I reproduced it there.

   Setup: a project with 31 primary agents in .opencode/agent/, the v2 web UI (same app code as desktop) in a 600px-tall window. In a new session I clicked Choose agent in the composer.

   Result: the menu opens upward to 928px tall, with its top 547px above the window. 20 of the 33 agents are cut off. The menu has no max-height and doesn't scroll with the wheel. This happens on 2.0.26 and still happens on the latest dev (7b3d4ce). The relevant code is the composer select's Menu (placement="top-start", no height limit) and menu-v2-content in menu.css (no max-height, no overflow-y), as you found.

   On v2, the agent selector only appeared after I turned on Settings → General → "Show custom agents".

   The recording and screenshot below show the clipped menu, and the script below reproduces it with Playwright.

   Related: #46987 (same symptom, on v1), #48789 (model selector should fit the screen), #50175, #41726, #43668.

   recording.mp4

   

   Reproduction script (repro-web.ts)

   // Reproduces #54374 in the v2 web UI (same app as desktop) with Playwright (bun add playwright; bunx playwright install chromium).
   // Setup:
   //   mkdir -p proj/.opencode/agent && cd proj && git init
   //   for i in $(seq -w 1 31); do printf -- "---\ndescription: Test agent $i\nmode: primary\n---\nYou are agent $i.\n" > .opencode/agent/agent-$i.md; done
   //   opencode serve --hostname 127.0.0.1 --port 4096   # prints the server password
   // Run: PW=<server password> bun repro-web.ts
   // Prints the menu's bounding box: top is negative (above the window) and items above the viewport cannot be scrolled to.
   import { chromium } from "playwright"
   const pw = process.env.PW!
   const out = process.env.OUT ?? "/workspace/repro"
   const b = await chromium.launch()
   const ctx = await b.newContext({ viewport: { width: 1280, height: 600 }, recordVideo: { dir: out + "/video", size: { width: 1280, height: 600 } } })
   const p = await ctx.newPage()
   await p.goto("http://127.0.0.1:4096/"); await p.waitForTimeout(3000)
   await p.getByText("Use password").click(); await p.waitForTimeout(500)
   await p.fill("input[name=server]", "http://127.0.0.1:4096")
   await p.fill("input[name=password]", pw)
   await p.keyboard.press("Enter"); await p.waitForTimeout(4000)
   // Show custom agents in the composer (Settings > General > Show custom agents)
   await p.getByRole("button", { name: "Settings" }).first().click(); await p.waitForTimeout(1500)
   await p.locator('[data-action="settings-show-custom-agents"] [role="switch"], [data-action="settings-show-custom-agents"] input, [data-action="settings-show-custom-agents"] label').first().click({ force: true }); await p.waitForTimeout(800)
   await p.screenshot({ path: out + "/settings.png" })
   await p.keyboard.press("Escape"); await p.waitForTimeout(1000)
   await p.getByText("Add project").click(); await p.waitForTimeout(1500)
   await p.getByText("Select folder").click(); await p.waitForTimeout(4000)
   await p.getByText("New session").click(); await p.waitForTimeout(3000)
   await p.screenshot({ path: out + "/s5.png" })
   console.log(await p.locator("button[aria-label]").evaluateAll(e=>e.map(x=>x.getAttribute("aria-label"))))
   const trigger = p.locator('button[aria-label="Choose agent"]').first()
   console.log("trigger count", await trigger.count())
   await trigger.click(); await p.waitForTimeout(1500)
   await p.screenshot({ path: out + "/menu-open.png" })
   const info = await p.evaluate(() => {
     const el = document.querySelector('[data-component="menu-v2-content"]') as HTMLElement | null
     if (!el) return null
     const r = el.getBoundingClientRect(); const cs = getComputedStyle(el)
     const items = [...el.querySelectorAll('[role="menuitemradio"]')].map(i => (i as HTMLElement).getBoundingClientRect().top)
     return { top: r.top, bottom: r.bottom, height: r.height, scrollHeight: el.scrollHeight, clientHeight: el.clientHeight, maxHeight: cs.maxHeight, overflowY: cs.overflowY, viewport: innerHeight, items: items.length, itemsAboveViewport: items.filter(t => t < 0).length }
   })
   console.log(JSON.stringify(info))
   // Try to scroll the menu with the wheel
   await p.mouse.move(200, 100); await p.mouse.wheel(0, -2000); await p.waitForTimeout(800)
   const after = await p.evaluate(() => (document.querySelector('[data-component="menu-v2-content"]') as HTMLElement)?.getBoundingClientRect().top)
   console.log("menu top after wheel", after)
   await p.screenshot({ path: out + "/menu-after-wheel.png" })
   await ctx.close(); await b.close()

   Run it: bun repro-web.ts
2. opencode-agent

   added

   reproduced

   on Oct 10, 2026
3. argszero commented on Oct 10, 2026

   

   argszero

   on Oct 10, 2026

   Contributor

   More actions

   I'd like to work on this.

   Confirmed against current dev. [data-component="menu-v2-content"] in packages/ui/src/navigation/menu/menu.css declares neither max-height nor overflow-y, and the composer agent select (ComposerEditorSelect, packages/app/src/composer/editor/editor.tsx) renders <Menu.Content> with no height constraint, so the floating surface grows unbounded.

   Two findings that make this smaller than it looks:

   • Kobalte already writes --kb-popper-content-available-height onto the popper positioner unconditionally (@kobalte/core/src/popper/popper-root.tsx, set before the fitViewport branch), so the clamp does not depend on enabling fitViewport.
   • The repo already applies exactly this pattern to a menu-v2-content: packages/app/src/settings/settings.css gives .settings-mobile-menu[data-component="menu-v2-content"] a max-height: var(--kb-popper-content-available-height) plus overflow-y: auto.

   Plan: add the viewport clamp and overflow-y: auto to the shared menu content rule so every menu-style surface scrolls like the select lists already do, then add a geometry regression case to the composer keeper suite (packages/app/e2e/regression/composer.spec.ts) asserting the menu stays inside the viewport and its content is reachable by scrolling. I'll look at scrolling the selected item into view on open as a follow-up in the same PR if it stays small.

   Happy to take a different shape if you'd rather keep the change scoped to the composer rather than the shared rule.
4. ehealthwares commented on Oct 10, 2026

   

   ehealthwares

   on Oct 10, 2026

   Author

   More actions

   Fix submitted in #54391 (fix(ui): clamp menu content to available height so long lists scroll). It clamps [data-component="menu-v2-content"] to the height corvu's popper already publishes as --kb-popper-content-available-height and makes the surface scrollable, so the agent/model/variant selects (and other menu surfaces) stay reachable when the list is taller than the window. Includes a LongList Storybook fixture with 32 agents to reproduce.
5. ehealthwares

   added a commit that references this issue on Oct 10, 2026

   fix(ui): let standard menu appearance scroll as well as compact

   ...

   52cd8bb
6. argszero commented on Oct 10, 2026

   

   argszero

   on Oct 10, 2026

   Contributor

   More actions

   Standing down on this one — #54391 (fix(ui): clamp menu content to available height so long lists scroll) covers it, and it covers it better than my plan did.

   For the record, what I had confirmed independently before opening it into a conflict:

   • --kb-popper-content-available-height is published unconditionally on the floating element by Kobalte's popper root (@kobalte/core/src/popper/popper-root.tsx, set just before the fitViewport branch), so the clamp does not depend on enabling fitViewport — which matches what fix(ui): clamp menu content to available height so long lists scroll #54391 relies on. (The issue text and the PR body both say "corvu's popper"; the publisher is Kobalte, and the kb- prefix is the tell. Worth correcting in the comment so the next reader looks in the right place — it changes nothing about the fix.)
   • [data-component="menu-v2-content"] in packages/ui/src/navigation/menu/menu.css declares neither max-height nor overflow-y, while the select listbox caps at 12rem with overflow-y: auto — so the contrast in the report is real.
   • packages/app/src/settings/settings.css already applies exactly this pattern to a menu-v2-content (.settings-mobile-menu), so this is following an existing convention rather than inventing one.

   The part I had missed, and #54391 caught, is [data-appearance="standard"]'s overflow: hidden — that declaration wins over a new overflow-y at equal specificity, so a vertical-only clamp silently does nothing for standard menus. Narrowing it to overflow-x: hidden is the right call.

   No competing patch from me. Thanks for picking it up.