From 0ba735048e5f2c6cef0e062fa9913ee9b9b073d5 Mon Sep 17 00:00:00 2001 From: Marius Date: Mon, 16 Mar 2026 15:04:06 +0100 Subject: [PATCH] fix: copy buttons overlaying text and misaligned in chat UI (#7098) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: copy buttons overlaying text and misaligned in chat UI - Change user message copy wrapper from absolute positioning to display:none/flex toggle so it no longer overlays bubble text - Fix assistant copy wrapper using display:block → display:flex to restore vertical centering with meta text - Move copy tooltip placement from 'top' to 'right' to prevent tooltip from obscuring message content above the button * fix: move copy response tooltip to bottom to avoid overlapping metadata * fix: preserve keyboard access for user message copy button Replace display:none with opacity/height/overflow/pointer-events so the button stays in the tab order and :focus-within can fire for non-pointer navigation. * fix: reset min-height and margin-top on collapsed copy wrapper The upstream stylesheet sets min-height:24px and margin-top:4px on the wrapper, which height:0 alone cannot override. Reset both to fully collapse the reserved space below user message bubbles. * fix: compact copy button sizing and minimal hover overflow layout * chore: update visual regression baselines --------- Co-authored-by: Thomas Brugman Co-authored-by: github-actions[bot] --- .../kilo-ui/src/components/message-part.css | 38 +++++++++++-------- .../full-conversation-turn-chromium-linux.png | 4 +- .../message-switch-chromium-linux.png | 4 +- .../user-message-story-chromium-linux.png | 4 +- .../default-chromium-linux.png | 4 +- .../with-steps-expanded-chromium-linux.png | 4 +- .../working-chromium-linux.png | 4 +- packages/ui/src/components/message-part.tsx | 4 +- 8 files changed, 37 insertions(+), 29 deletions(-) diff --git a/packages/kilo-ui/src/components/message-part.css b/packages/kilo-ui/src/components/message-part.css index 889b4b9c2ac..bd2db869f91 100644 --- a/packages/kilo-ui/src/components/message-part.css +++ b/packages/kilo-ui/src/components/message-part.css @@ -12,7 +12,12 @@ } [data-slot="text-part-copy-wrapper"][data-is-turn-copy] { - display: block; + display: flex; + + [data-component="icon-button"] { + width: 20px; + height: 20px; + } } } @@ -92,26 +97,29 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] { margin-bottom: 0px; } -/* Remove the empty space below user message bubbles. - * The upstream copy wrapper is a normal-flow block with min-height + margin, - * so it reserves ~28px even when invisible. Override it to be absolutely - * positioned over the bottom-right corner of the bubble — zero layout impact - * when hidden, overlays on hover exactly like the text-part copy button. */ +/* User message copy button: tiny reserved space, button overflows on hover. + * height:2px keeps layout stable; overflow:hidden clips the invisible button; + * on hover overflow:visible lets the button appear without shifting content. */ [data-component="user-message"] { - position: relative; - [data-slot="user-message-copy-wrapper"] { - position: absolute; - top: 4px; - right: 4px; - bottom: auto; - min-height: unset; + min-height: 0; + height: 10px; margin-top: 0; - width: auto; - /* hide meta text; only the icon-button matters in the sidebar */ + overflow: hidden; + [data-slot="user-message-meta-wrap"] { display: none; } + + [data-component="icon-button"] { + width: 20px; + height: 20px; + } + } + + &:hover [data-slot="user-message-copy-wrapper"], + &:focus-within [data-slot="user-message-copy-wrapper"] { + overflow: visible; } } diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/full-conversation-turn-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/full-conversation-turn-chromium-linux.png index e55234b4c33..39b2a59a88b 100644 --- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/full-conversation-turn-chromium-linux.png +++ b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/full-conversation-turn-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8a993599ddc1f6e3afd5e44f3d4b92d03d6d4e8699128055eeae0089ffabf80f -size 20048 +oid sha256:2fe46a0d03b43df057a7aea430ee08f21e4406680da295568a242c94bfd57f32 +size 20113 diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/message-switch-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/message-switch-chromium-linux.png index ce05279a333..3e94c1e46c7 100644 --- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/message-switch-chromium-linux.png +++ b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/message-switch-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a76639955a7a3e7c5f1369468db6bcbfa07451ebaed080738e3b321f03042490 -size 20048 +oid sha256:73f46e8054adeecf2baf85a3c688b2ecfb0b56e697061c9f2f8114ab0882e392 +size 20113 diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/user-message-story-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/user-message-story-chromium-linux.png index 810eebcae2b..29d9725da84 100644 --- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/user-message-story-chromium-linux.png +++ b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-messagepart/user-message-story-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f8e48fabc63ede1c9ff99614d852ceaeb60b3e53275ff20cd8f03b2dbda79749 -size 3990 +oid sha256:b63ac69598ce0bbcb2ef674f0fb07ebc746f36f188d09a1a392661b9436d3916 +size 4138 diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/default-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/default-chromium-linux.png index 3ec89b92089..59a093a8e7e 100644 --- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/default-chromium-linux.png +++ b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/default-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1de30d219cd299acf26c9fe473c00f18cf057297db2e9b1ae44fb3116b0392f0 -size 31305 +oid sha256:cba87b80407953fa44ed0acf4b5069f4bd0a06ea864e79db6f1bbc43c38d8127 +size 31323 diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/with-steps-expanded-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/with-steps-expanded-chromium-linux.png index 3ec89b92089..59a093a8e7e 100644 --- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/with-steps-expanded-chromium-linux.png +++ b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/with-steps-expanded-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1de30d219cd299acf26c9fe473c00f18cf057297db2e9b1ae44fb3116b0392f0 -size 31305 +oid sha256:cba87b80407953fa44ed0acf4b5069f4bd0a06ea864e79db6f1bbc43c38d8127 +size 31323 diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/working-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/working-chromium-linux.png index f19ccf29edc..8d8086c7da2 100644 --- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/working-chromium-linux.png +++ b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-sessionturn/working-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f48b838fb46e05c0b09cd6540e0d4b17b47a40fde82b0c919bceaac01f5446dd -size 6109 +oid sha256:3a3c885d4186d6d372e417768e2cb0919da9943eca92b58af46f40d45ea7f3c4 +size 6223 diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index 43dc88e2625..1cd98368d18 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -970,7 +970,7 @@ export function UserMessageDisplay(props: {