fix(vscode): use a minimum prompt input gutter

.changeset/prompt-input-minimum-gutter.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Use a shared responsive minimum gutter for prompt inputs across the VS Code sidebar, Agent Manager, and worktree dialogs.

packages/kilo-vscode/tests/prompt-spacing.spec.ts

@@ -0,0 +1,61 @@
+import { expect, test, type Page } from "@playwright/test"
+
+const GLOBALS = "colorScheme:dark;theme:kilo-vscode;vscodeTheme:dark-modern"
+
+async function open(page: Page, id: string, width: number) {
+  await page.setViewportSize({ width, height: 720 })
+  await page.goto(`/iframe.html?id=${id}&viewMode=story&globals=${GLOBALS}`, { waitUntil: "load" })
+  await page.waitForSelector(".prompt-input-container")
+  await page.evaluate(() => document.fonts.ready)
+}
+
+async function spacing(page: Page, selector = ".prompt-input-container") {
+  return page.locator(selector).evaluate((el) => {
+    const box = el.getBoundingClientRect()
+    const host = el.closest(".chat-view, .am-nv-dialog-content")
+    if (!(host instanceof HTMLElement)) throw new Error("prompt host missing")
+    const parent = host.getBoundingClientRect()
+    const style = getComputedStyle(el)
+    return {
+      left: box.left - parent.left,
+      right: parent.right - box.right,
+      top: style.marginTop,
+      bottom: style.marginBottom,
+      gutter: getComputedStyle(host).getPropertyValue("--prompt-gutter").trim(),
+    }
+  })
+}
+
+test.describe("prompt spacing", () => {
+  test("uses the minimum gutter in a narrow sidebar chat", async ({ page }) => {
+    await open(page, "chat--chat-view-idle", 300)
+    const value = await spacing(page)
+
+    expect(value.left).toBeCloseTo(6, 1)
+    expect(value.right).toBeCloseTo(6, 1)
+    expect(value.top).toBe("6px")
+    expect(value.bottom).toBe("6px")
+    expect(value.gutter).toBe("max(6px, 2cqi)")
+  })
+
+  test("uses the same responsive gutter in Agent Manager chat", async ({ page }) => {
+    await open(page, "agentmanager--readable-chat-420", 420)
+    const value = await spacing(page)
+
+    expect(value.left).toBeCloseTo(8.4, 1)
+    expect(value.right).toBeCloseTo(8.4, 1)
+    expect(value.top).toBe("8.4px")
+    expect(value.bottom).toBe("8.4px")
+    expect(value.gutter).toBe("max(6px, 2cqi)")
+  })
+
+  test("keeps the minimum gutter in the New Worktree prompt", async ({ page }) => {
+    await open(page, "agentmanager--new-worktree-variant-dropdown-1280", 1280)
+    const value = await spacing(page, ".am-prompt-input-container")
+
+    expect(value.left).toBeGreaterThanOrEqual(6)
+    expect(value.right).toBeGreaterThanOrEqual(6)
+    expect(value.top).toBe("6px")
+    expect(value.bottom).toBe("6px")
+  })
+})

packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css

@@ -2899,7 +2899,7 @@ body.am-wt-dragging-active * {
    resize); the textarea always fills it and is the only element that scrolls,
    so long prompts never produce nested scrollbars. */
 .am-nv-dialog .am-prompt-input-container {
-  margin: 0;
+  margin: var(--prompt-min-gutter);
   resize: vertical;
   overflow: hidden;
   min-height: 120px;

packages/kilo-vscode/webview-ui/src/styles/chat-layout.css

@@ -21,6 +21,7 @@
   --chat-readable-width: 98ch;
   --chat-gutter: clamp(16px, 4cqi, 48px);
   --chat-scrollbar-width: 10px;
+  --prompt-gutter: max(var(--prompt-min-gutter), 2cqi);
 }
 
 /* ============================================
@@ -505,20 +506,18 @@
 .chat-view .prompt-input-container,
 .chat-view .session-dock {
   box-sizing: border-box;
-  width: min(
-    calc(100% - var(--chat-gutter) - var(--chat-gutter) - var(--chat-scrollbar-width) - 8px),
-    var(--chat-readable-width)
-  );
+  width: min(calc(100% - var(--prompt-gutter) - var(--prompt-gutter)), var(--chat-readable-width));
   margin-inline: auto;
 }
 
+.chat-view .prompt-input-container {
+  margin-block: var(--prompt-gutter);
+}
+
 .chat-view .chat-input > .startup-error-banner,
 .chat-view .chat-input > [data-component="permission-shortcuts"] {
   box-sizing: border-box;
-  width: min(
-    calc(100% - var(--chat-gutter) - var(--chat-gutter) - var(--chat-scrollbar-width) - 8px),
-    var(--chat-readable-width)
-  );
+  width: min(calc(100% - var(--prompt-gutter) - var(--prompt-gutter)), var(--chat-readable-width));
   margin-inline: auto;
 }
 
@@ -550,7 +549,7 @@
 }
 
 .chat-input:has(> [data-component="permission-shortcuts"]) > .prompt-input-container {
-  margin-top: 0;
+  margin-top: var(--prompt-gutter);
 }
 
 .chat-input > [data-component="permission-shortcuts"] {

packages/kilo-vscode/webview-ui/src/styles/prompt-input.css

@@ -2,9 +2,13 @@
    Prompt Input
    ============================================ */
 
+:root {
+  --prompt-min-gutter: 6px;
+}
+
 .prompt-input-container {
   position: relative;
-  margin: 12px;
+  margin: var(--prompt-min-gutter);
   border-radius: 0.25rem;
   background-color: var(--input-base, var(--vscode-input-background, #3c3c3c));
   border: 1px solid var(--border-weak-base, var(--vscode-input-border, #3c3c3c));

packages/kilo-vscode/webview-ui/src/styles/session-actions.css

@@ -15,7 +15,7 @@
 }
 
 .chat-input > .session-dock + .prompt-input-container {
-  margin-top: 0;
+  margin-top: var(--prompt-gutter);
 }
 
 :root {