From 664784393eaef6e49cae71feb2b367963ff05110 Mon Sep 17 00:00:00 2001 From: Marius Date: Tue, 24 Mar 2026 10:06:25 +0100 Subject: [PATCH] fix(kilo-ui): fix user message copy button unclickable in sidebar (#7501) * fix(kilo-ui): fix user message copy button unclickable in sidebar The copy wrapper height (10px) was smaller than the button (20px), causing the button to overflow outside the parent's bounding box. Hovering the overflowed region lost the parent :hover state, which reverted pointer-events to none and opacity to 0 before the click could register. Set wrapper height to 20px to fully contain the button and remove the overflow:hidden/visible toggle that is no longer needed. Fixes regression from #7098. * chore: update visual regression baselines --------- Co-authored-by: github-actions[bot] --- packages/kilo-ui/src/components/message-part.css | 15 +++++---------- .../full-conversation-turn-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 ++-- 6 files changed, 15 insertions(+), 20 deletions(-) diff --git a/packages/kilo-ui/src/components/message-part.css b/packages/kilo-ui/src/components/message-part.css index cac42ad5f26..2388d5e4635 100644 --- a/packages/kilo-ui/src/components/message-part.css +++ b/packages/kilo-ui/src/components/message-part.css @@ -150,15 +150,15 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] { margin-bottom: 0px; } -/* 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. */ +/* User message copy button: collapse wrapper when idle, show on hover. + * The wrapper must be tall enough to fully contain the button (20px) + * so that hovering the button keeps [data-component="user-message"] + * hovered — otherwise :hover is lost and pointer-events/opacity revert. */ [data-component="user-message"] { [data-slot="user-message-copy-wrapper"] { min-height: 0; - height: 10px; + height: 20px; margin-top: 0; - overflow: hidden; [data-slot="user-message-meta-wrap"] { display: none; @@ -169,11 +169,6 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] { height: 20px; } } - - &:hover [data-slot="user-message-copy-wrapper"], - &:focus-within [data-slot="user-message-copy-wrapper"] { - overflow: visible; - } } [data-component="question-answers"] { 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 6f383cb9019..27646a659da 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:9cad4954b9ac5c0d1a245d14b3ab51836217479870c39589a55eb862c4247aa9 -size 18902 +oid sha256:81fd232992e804e8e0b3453c4e77d358f8c24dd7495b354b8d7de24c7a43724c +size 18986 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 b68a8dc340c..c11138b36db 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:876fba84b341bffa55bedb3c6d3384c5099c9a1d9336a3090b429b87e1256110 -size 4149 +oid sha256:4b690e1cba9e1a7a4eef86162c762092f5908f2d498f0d77f48c44fef1fd44ff +size 4242 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 4b660e94928..5e3dcecb255 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:0fc349b25120ba40eaf3f6e6cb9adf268a0433c6a4b4e723f5a9957c555aec25 -size 29267 +oid sha256:71a4c5ce0d2bd00ac8428a65e3c4db6c0455720cac5467f8f483a9708cea8765 +size 29370 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 7adc3a5b82c..5e3dcecb255 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:c67bd29525bc38133cc5271d0467e85e131a0bd41313a4033836e7a6bc5e02e2 -size 26312 +oid sha256:71a4c5ce0d2bd00ac8428a65e3c4db6c0455720cac5467f8f483a9708cea8765 +size 29370 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 a69883f2758..6d44ffd8a25 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:640fabcec21e9e8e2251e1b347966790d347af9c0b438ca4dc9bc118819069f2 -size 4562 +oid sha256:4272e7e538d95ee3c7010dca5711a53643573c0efed2c527d6db58ef23d6c086 +size 4627