diff --git a/.changeset/am-dialog-popover-clipping.md b/.changeset/am-dialog-popover-clipping.md new file mode 100644 index 00000000000..66fc9803756 --- /dev/null +++ b/.changeset/am-dialog-popover-clipping.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Fix the reasoning-variant and mode dropdowns being clipped inside the New Worktree dialog. The dialog's scroll-container overflow escape now covers all inline selector popovers, not just the model picker, so dropdowns render fully above the prompt input. diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css index 4007ad8b9e1..173f3277092 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css +++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css @@ -2709,10 +2709,11 @@ body.am-wt-dragging-active * { overflow-y: auto; } -.am-nv-dialog .am-prompt-input-container:has([class~="model-selector-popover"][data-component="popover-content"]), -.am-nv-dialog-content:has([class~="model-selector-popover"][data-component="popover-content"]), -[data-component="dialog"]:has(.am-nv-dialog [class~="model-selector-popover"][data-component="popover-content"]) - [data-slot="dialog-body"] { +/* While any inline (non-portaled) selector popover is open, let it escape the + dialog's scroll containers. Covers model, thinking-variant, and mode pickers. */ +.am-nv-dialog .am-prompt-input-container:has([data-component="popover-content"]), +.am-nv-dialog-content:has([data-component="popover-content"]), +[data-component="dialog"]:has(.am-nv-dialog [data-component="popover-content"]) [data-slot="dialog-body"] { overflow: visible; } diff --git a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx index fbad72deba7..b35303e1273 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx @@ -10,6 +10,8 @@ import { FileTree } from "../../diff-viewer/FileTree" import { DiffPanel } from "../../agent-manager/DiffPanel" import { FullScreenDiffView } from "../../diff-viewer/FullScreenDiffView" import { WorktreeItem } from "../../agent-manager/WorktreeItem" +import { NewWorktreeDialog } from "../../agent-manager/NewWorktreeDialog" +import { useDialog } from "@kilocode/kilo-ui/context/dialog" import { ChatView } from "../components/chat/ChatView" import { registerVscodeToolOverrides } from "../components/chat/VscodeToolOverrides" import { SessionContext } from "../context/session" @@ -929,6 +931,43 @@ export const TabBarSingleTab: Story = { ), } +// --------------------------------------------------------------------------- +// NewWorktreeDialog — variant dropdown must escape the dialog scroll containers +// (regression: inline popovers were clipped by .am-nv-dialog-content overflow) +// --------------------------------------------------------------------------- + +const NewWorktreeVariantOpener = () => { + const dialog = useDialog() + const open = () => { + if (document.querySelector("[data-component='popover-content']")) return + window.dispatchEvent(new CustomEvent("openVariantPicker")) + requestAnimationFrame(open) + } + onMount(() => { + dialog.show(() => {}} />) + requestAnimationFrame(open) + }) + return null +} + +export const NewWorktreeVariantDropdown1280: Story = { + name: "NewWorktreeDialog — variant dropdown open", + parameters: { layout: "fullscreen" }, + render: () => { + const session = { + ...mockSessionValue(), + configModel: () => ({ providerID: "kilo", modelID: "anthropic/claude-sonnet-4-6" }), + } + return ( + + + + + + ) + }, +} + const searchSection = { id: "polish", name: "Polish", color: "Blue", order: 0, collapsed: false } const slackedSection = { id: "slacked", name: "SLACKED", color: "Yellow", order: 1, collapsed: false } const sidebarSearchItems: SidebarSearchItem[] = [