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-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png new file mode 100644 index 00000000000..2b594d86ac1 --- /dev/null +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/new-worktree-variant-dropdown-1280-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2f7edbc1bf6f10260626bf21406bb02e32dc17bf969c83e8b56251c50f755a1f +size 7737 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..4f2aef6e2dd 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 @@ -23,6 +23,7 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button" import { Icon } from "@kilocode/kilo-ui/icon" import { TooltipKeybind } from "@kilocode/kilo-ui/tooltip" import { ContextMenu } from "@kilocode/kilo-ui/context-menu" +import { ThinkingSelectorBase } from "../components/shared/ThinkingSelector" import { createSignal, onCleanup, onMount, type JSX } from "solid-js" import type { WorktreeFileDiff, WorktreeState, WorktreeGitStats, PRStatus } from "../types/messages" import type { ReviewComment } from "../../diff-viewer/review-comments" @@ -929,6 +930,70 @@ export const TabBarSingleTab: Story = { ), } +// --------------------------------------------------------------------------- +// NewWorktreeDialog — inline selector popovers must escape the dialog scroll +// containers. Regression: the reasoning-variant and mode pickers were clipped +// by .am-nv-dialog-content (overflow-y: auto) and .am-prompt-input-container +// (overflow: hidden) because the overflow escape hatch only covered the model +// picker. This fixture reproduces the real clipping chain (same CSS classes + +// the real inline ThinkingSelectorBase with portal={false}) so a screenshot +// baseline catches any future regression. Rendered inline (no dialog portal) +// because the visual-regression harness screenshots #storybook-root. +// --------------------------------------------------------------------------- + +const VariantPickerOpener = () => { + let frame = 0 + let attempts = 0 + const open = () => { + if (document.querySelector("[data-component='popover-content']")) return + if (attempts++ >= 120) return + window.dispatchEvent(new CustomEvent("openVariantPicker")) + frame = requestAnimationFrame(open) + } + onMount(() => { + frame = requestAnimationFrame(open) + }) + onCleanup(() => cancelAnimationFrame(frame)) + return null +} + +export const NewWorktreeVariantDropdown1280: Story = { + name: "NewWorktreeDialog — variant dropdown open", + parameters: { layout: "fullscreen" }, + render: () => ( + + {/* Filler pushes the prompt container to the bottom of the dialog content. + The variant popover opens upward from the trigger, extending above the + container's top edge. Without the overflow escape fix, .am-prompt-input-container + (overflow: hidden + position: relative) clips the top of the popover. */} +
+
+
+
+
+
+
+ {}} + portal={false} + deferDismiss + /> +
+
+
+
+
+
+ + + ), +} + 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[] = [