fix(vscode): prevent selector popover clipping in new worktree dialog - #12007
Merged
Conversation
The New Worktree dialog renders model, reasoning-variant, and mode pickers inline (portal=false) so clicks aren't swallowed by the modal overlay. The CSS overflow escape hatch that lets an open popover break out of the dialog's scroll containers keyed only on model-selector-popover, so the variant and mode dropdowns added later were clipped by .am-nv-dialog-content and the prompt container. Generalize the :has() rules to any popover-content inside the dialog. Popover content unmounts on close, so the override only applies while a dropdown is open. Add a visual-regression story (NewWorktreeDialog with the variant dropdown open) that reproduces the clipping without the fix and covers all inline pickers going forward.
chrarnoldus
approved these changes
Jul 7, 2026
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
Contributor
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Files Reviewed (1 file in latest commit)
Previous Review Summaries (2 snapshots, latest commit 6bb3608)Current summary above is authoritative. Previous snapshots are kept for context only. Previous review (commit 6bb3608)Status: 1 Issue Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
Files Reviewed (2 files in latest commit)
Fix these issues in Kilo Cloud Previous review (commit a5df5bc)Status: 1 Issue Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
Files Reviewed (3 files)
Reviewed by claude-sonnet-5-20260630 · Input: 24 · Output: 4.2K · Cached: 500.1K Review guidance: REVIEW.md from base branch |
marius-kilocode
force-pushed
the
fix-agent-manager-modal-regression
branch
2 times, most recently
from
July 7, 2026 12:45
6bb3608 to
65c4538
Compare
marius-kilocode
enabled auto-merge
July 7, 2026 12:46
The dialog.show() approach portaled the dialog to document.body (outside
#storybook-root), and Kobalte's modal set aria-hidden on #storybook-root,
causing Playwright's toHaveScreenshot to time out (element not visible).
Replace with an inline fixture that reproduces the real CSS clipping chain:
.am-nv-dialog > .am-nv-dialog-content > .am-prompt-input-container (position:
relative, overflow: hidden from agent-manager.css) with the real inline
ThinkingSelectorBase (portal={false}). The variant picker opens upward; with
the overflow escape fix the popover renders fully above the container, without
it floating-ui repositions the popover lower. The screenshot baseline captures
the fixed state and catches any regression.
marius-kilocode
force-pushed
the
fix-agent-manager-modal-regression
branch
from
July 7, 2026 12:47
65c4538 to
0ab3702
Compare
This was referenced Jul 7, 2026
t7tran
pushed a commit
to t7tran/kilocode
that referenced
this pull request
Aug 14, 2026
…al-regression fix(vscode): prevent selector popover clipping in new worktree dialog
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
In the Agent Manager New Worktree dialog, the reasoning-variant and mode dropdowns were clipped by the dialog's scroll containers, cutting off rows at the top of the popup (the variant picker's top option was not visible).
Before:
After:
Why this happened
The dialog renders the model, reasoning-variant, and mode pickers inline (
portal={false}) instead of portaled todocument.body. That's deliberate: portaled popovers land under the dialog's modal overlay, which swallows their clicks, so the pickers render inside the dialog DOM and rely on CSS to escape the dialog's clipping.The escape hatch keyed only on
model-selector-popover(agent-manager.css). When the variant and mode pickers were later added to the dialog, no matching rule was added, so their popovers were clipped by.am-nv-dialog-content { overflow-y: auto }and.am-prompt-input-container { overflow: hidden }.Change
Generalize the
:has()escape rules to target any[data-component="popover-content"]inside the dialog, so all inline selector popovers (model, variant, mode, and future ones) escape the scroll containers while open. Popover content unmounts on close (Kobalte default), so theoverflow: visibleoverride only applies while a dropdown is open and the dialog scrolls normally otherwise.Regression coverage
Adds a visual-regression story (
AgentManager / NewWorktreeDialog — variant dropdown open, 1280px viewport) that renders the realNewWorktreeDialogand opens the variant picker via theopenVariantPickerevent. Verified locally that it reproduces the clipping with the CSS reverted and renders fully with the fix applied. CI will generate the Linux baseline on push.Manual verification
bun run typecheck,bun run lint,bun run formatclean inpackages/kilo-vscode/.