fix: copy buttons overlaying text and misaligned in chat UI (#7098)

* 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 <thomas.brugman.teb3@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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;
   }
 }
 

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

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

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

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

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

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

packages/ui/src/components/message-part.tsx

@@ -970,7 +970,7 @@ export function UserMessageDisplay(props: {
             </Show>
             <Tooltip
               value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyMessage")}
-              placement="top"
+              placement="right" // kilocode_change: avoid overlapping message text
               gutter={4}
             >
               <IconButton
@@ -1349,7 +1349,7 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
           >
             <Tooltip
               value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyResponse")}
-              placement="top"
+              placement="bottom" // kilocode_change: avoid overlapping message text above and metadata to the right
               gutter={4}
             >
               <IconButton