fix(vscode): keep permission prompt actions reachable with large diffs

[marius-kilocode]

Fixes #13191

A permission card can be taller than the space left below the transcript: the title, description, an inline diff capped at 420px, the Allow/Deny row and the auto-approve tray easily add up to ~500px. The card lives in .chat-input, which was flex-shrink: 0 inside a .chat-view that clips its overflow, so the card kept its full height, the transcript collapsed to zero, and the bottom of the card was simply cut off by the panel edge. The only scroll containers were inside the diff itself, so there was nothing to scroll to bring the buttons back.

The result is a blocked session: with a short chat area (a large bottom panel in Agent Manager, a small window, or a bigger editor font) the ask can only be answered through the Enter/Escape shortcuts, which are not discoverable and which many users will not try while looking for a button.

Behavior this introduces:

• The description, command preview and diffs move into a single scroll region inside the card, capped at the same 420px budget as before. The action row sits outside that region and never shrinks or scrolls away.
• While a permission is pending, the composer column is laid out so the card is a shrinkable item, bounding it to the height actually available. The scroll region gives up space first, so shrinking the panel shrinks the diff preview rather than hiding the buttons.
• The card stops shrinking at its own floor (title row, action row and tray), so the buttons survive even in an extremely short panel instead of being clipped.
• A single-file diff now scrolls as part of that one region, so there is one scrollbar instead of a diff scroller nested in a list scroller. Multi-file asks keep the per-file 300px cap, otherwise the last file would sit thousands of pixels down the list.
• The command preview and the multi-path pattern list keep their natural height inside the scroll region. Both have their own clipped or hidden-scrollbar boxes, so letting them shrink cut text off with no affordance to scroll it back.

Spacing, sizing and the appearance of the card in a roomy panel are unchanged.

Before and after

A +150 −0 edit ask in a 515px-high chat area. Before, the card runs past the panel edge: no Allow/Deny, no tray, no composer, and no scrollbar anywhere. After, the diff preview shrinks and scrolls while the buttons, tray and composer stay in place.

Before	After

The same ask in a panel with room to spare, where the card looks as it did before:

The committed visual-regression baselines for the permission-dock-edit and permission-dock-apply-patch stories still show the truncated card, since those stories render ChatView in 350px and 420px containers. They need to be regenerated with this change.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

lgtm — the flex-layout approach is sound: the margin-collapse compensation (banner/prompt-input) matches the pre-change spacing exactly, the specificity ordering between the :has() child rule and the card rule is correct, and the permission-scroll-content wrapper correctly addresses Pierre's virtualizer using the scroll root's first child as its content container. No new listeners, timers, or subscriptions — no leak vectors introduced. Changeset is present and user-facing, and the regenerated baselines cover the affected stories.

Files Reviewed (17 files)

• .changeset/permission-prompt-scroll.md
• packages/kilo-vscode/webview-ui/src/components/chat/PermissionDock.tsx
• packages/kilo-vscode/webview-ui/src/styles/chat-layout.css
• packages/kilo-vscode/webview-ui/src/styles/permission-dock.css
• packages/kilo-vscode/tests/permission-diff.spec.ts
• 12 visual-regression baseline PNGs under packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/composite-webview/ (CI-generated)

---

_{Reviewed by kimi-k3 · Input: 213.3K · Output: 15.7K · Cached: 1.8M}

_{Review guidance: REVIEW.md from base branch main}