fix(vscode): use a minimum prompt input gutter (#13310)

* fix(vscode): use minimum prompt input gutter * chore: update kilo-vscode visual regression baselines --------- Co-authored-by: kilo-maintainer[bot] <kilo-maintainer[bot]@users.noreply.github.com>
2026-09-01 15:32:11 +08:00 · 2026-08-21 13:51:49 +02:00
parent 871b5276a4
commit c171b12fc3
39 changed files with 147 additions and 78 deletions
@@ -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.
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:24f8e46671ff667d05a5db36fcd45535040a2587202562a40f8735efa351a1e5
-size 46989
+oid sha256:02f465da92351b317178f383cec71f5fbeb8aa8ff52798ec4ed9d1d570176028
+size 46937
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:181609c7545d67f4a4b9c948293984ecf18c940a41d67c488fa760965d109ce5
-size 13437
+oid sha256:f5683017f16dcb908a96c2726cf6d48f58bf8be56e20ef6f9fd8e4e916cbf8d9
+size 15619
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b7ecf054c5e5ab8daa2ea0e3ef42e2e720a9dc3673d77058ad7df05751990193
-size 17036
+oid sha256:b7c197aa81e6448a7fae41fa19e306867d40ebe8454f408138cc3630ee3f92c5
+size 17093
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bd700edca458baefb4ce6cea68ed78f8c002bfb6edd842dbea318c2fa443b814
-size 32789
+oid sha256:bbe086983757d02e90c26f3798a6a8e3883ac57e009bebdde0852836684c7595
+size 32553
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7294cf96505d165a74609912f17be2da7318ea43517dc329370e31d60aa835fe
-size 9900
+oid sha256:56fa45b6915c2a89fd9382291ea9990d7ecc06c27512379ae43f4c2e3b51e821
+size 10147
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a2c0fe6b4fefd0925b670b8ffc42acd09eb7ca7bd848d100e7e4a7a85d67a9f5
-size 15807
+oid sha256:b7979c93073969e3971f8ebce07af58910824d3736491c3305d0a14ec20bc12e
+size 15883
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c913b1d73750765dd88b170364776f0a6ffbeb65f7fa5fcfce953a8082c5d46c
-size 28560
+oid sha256:7ad513a7edc4886d509a21ed637a96c1119c380d8edd885d1cca90cab2336d6a
+size 28308
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:94377b6b66f1b35803963ce7951f473e44f16ca8463dfc8a2c81f3e816296533
-size 27245
+oid sha256:f6eeadf51d0e877606af261a5ecfc00c14cca0936fa10c6bfd10a30c7e495105
+size 27239
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:102793cbc80c80c7c889db669016566ceafe86eb37d65b7505a7483d1e883cbd
-size 27527
+oid sha256:8ed7319f670b70e7847114e6f2b636bb862c423a65e0747614023e45dfff526a
+size 27277
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cbe5bc3635a41e9aac342c2fcfd6adb1f38e0ce28ea7cf10b9f7297067103673
-size 29743
+oid sha256:b847d25a2fc62bf046c95575ae06b391e73c390d31b31a59495217f03e004c42
+size 29733
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f0c612b61586c3f71b468e49c0ceab2ac2b8ef630d9e8aee1db63b2e6d7a74c7
-size 32345
+oid sha256:d17bc762c90f113c5187d61f134de6b7032a703879b9a62da4a8be6c6a8f80e4
+size 34138
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:627a7ab79c52de6663138ab748994cfc4fb3022601d388e0ef5dd538c54d63fa
-size 16379
+oid sha256:68a587e93c242d4a92d3e8dd963ee3d834a72d59a58d729b73677e029c663bf6
+size 16245
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:18098fafe8eb05a020d8070e1d8783611750cdad4d71025f81eaa42d62ba75f5
-size 16005
+oid sha256:f5584e15ef2931523ad5611adc4786cf6c61559922f013269887476410c5f34c
+size 15777
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:501a1d8eee78345bcd538df3b9df6f9f5f6b49903aff66a7f2fd15827c66371f
-size 22159
+oid sha256:830b1836cd51e64d3d346f33ce409fee072e7f00f442f7d037a70375e0eb9a7a
+size 21829
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db7fdb7b9699dc4b668259b61731e3a024c1ed20d8232055681f551889fac086
-size 18942
+oid sha256:1614ef3548997b8ffc7678f09715a88c6e43bbbd7df4a7ebebd302938811da1c
+size 18659
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6ac541494bb7faf06bd89d51aaf81dbd405945911e9570b370b7741e398734e5
-size 17822
+oid sha256:1dbf117b7c1a8d69492f7c53fa20ab444a812f76c07fb20ab69e2aa171849c31
+size 17194
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:679a9d8cf02036ea103f93f1c7c2df9b5c329044bd302ba10141f9d34495663e
-size 17000
+oid sha256:0dcdb3e6d23c7731a8a5805a0094f5ad25cb6626e66a1027eac1c305990f1fac
+size 18766
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d60096bf740a7503ba0724b01dc94830ddaeb70d02d86777e481269b445ff629
-size 21137
+oid sha256:2ec325683493d0c171b4e6aabaa9a4ea5222664bad3877cf80016c8b3e70f432
+size 20924
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:800358fb3669a879eaa0228e72f3b623c275b88fa810bab4a3d6f0e015b5d84e
-size 15307
+oid sha256:5ac3172eb1f343a83a6412a5fbad00bbf9552ad867ad32cecc6b05dbd2bbd95f
+size 16290
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:83673f48e121d5e181a8700f6eb7e091d2ef14ce17552647e0552881977fd0f1
-size 16209
+oid sha256:ebb66040e8fe9aecab3d41ce75bda2e8f1ec29ef93be41ccf034c1aa15e6bde4
+size 15954
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5c3ba074f2080ac4ad03adb7a1bc81ca56efefd29ca8fd1186d5c9d928bcd0af
-size 15828
+oid sha256:9ba572ab479f6ccc821c0e88a0bf3d28cb41e862c043c88e4068559736912f4c
+size 15548
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:21d9d9ef350b57515cb956fba4bdbc5d0801c6fe4cef6f18983ae809741480a5
-size 15652
+oid sha256:d0386c4133919eb00e98e6d84875fc9711920c9c7c6224d8854706a4f9851a22
+size 15320
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4b5438ebc5b9f7ec214315b0a91f931815da087c11dcd3db99f17e196d367c84
-size 16736
+oid sha256:372e5b313044b8abf7f19413a123371d5b72a1b3855b45ba809368ae096bf9b1
+size 16215
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:21097ecf30d0e605f2117c5e98f047db7e65eb43f921a380e7ccade21fc6fc34
-size 19594
+oid sha256:7630066f8aab0d61d586c78a5277f76a71a60dbc5d63e0509a2fc5ea94bc2e61
+size 19598
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b9b06384010b48a7a2624ab895f4ef8baebcdba4e0d7e123f2cc0dd3b6748b8a
-size 16304
+oid sha256:43fe1dd6a16cba986efde03e771f0d9fd906ea42b665ad05a2f557cd5aab200f
+size 16040
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dd306e8bb95d7457ef3b504ff46c44dcfa6b273a316021e2f920db29c2035021
-size 4992
+oid sha256:28a0ba0675cdfb62f6f80d63a3fadcaacf215c2ad65f12f2fa04774bfdb33028
+size 4940
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:862a22d4123e5c512d4ae87eb881c5923f14ac5207bf77b4707063b3dcc53422
-size 3991
+oid sha256:00746923c55f811fba5e823ff8e35205f6f6c70d1e7ce440514636ce8a4d0791
+size 5364
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d77e49dab17d964344cd0ca5618b1593f38c3d09f8dffffc2dca892477c5ff5c
-size 5328
+oid sha256:f347005b2fb066a836b865b236d4ca27e5a8a09dc80c7df6683520f000bdf4c3
+size 5280
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aa3a5abf6d9488d8d14db03b89e1c569dc7fc8181ee337478705d0af8bde4ea0
-size 5624
+oid sha256:ecc3761d4315beb12e69af19d391ecdede2e6d71586ee3a7bd6f46c32013c4c1
+size 5546
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:50e25bc93fa7d963c9d3a6b71918e623b02ab42a3c638cc2936a02cd2a773e26
-size 5261
+oid sha256:10b8abe679042e3ccd36f7baca0cdcf14ceae61faadd597aa94c7471e17ffd7c
+size 5209
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1ac5b0f48f483ce5fff844aec9316effb5395ee43740b782ebaa9adab7807f59
-size 5690
+oid sha256:76f28776968833286e0dc6c2610fa7a9cc32652615b1d5dbd0d7fef092b28afc
+size 5620
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e5b5b806af5e943fc69ad70a13d446e38807d733f66ac2647ee4057957976dea
-size 4211
+oid sha256:cdb59fc167c642e9c6a5e8298fe06393cc8b4ce67bfc4c588245b748d2661615
+size 5584
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4f395ec688aa5adc800b2145615691ee9bfcc1b5a365600105dd1a17f28e343c
-size 6118
+oid sha256:da4aac6eededda5642e50d4482a684242ddcd2502dd660140c61bafacdabbea7
+size 6039
@@ -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")
+  })
+})
@@ -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;
@@ -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"] {
@@ -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));
@@ -15,7 +15,7 @@
 }

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

 :root {