From 0ab624bff43b59f0a7f7f704a7917ada152c82b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Sun, 31 May 2026 21:43:09 +0800
Subject: [PATCH] fix(desktop): remove hidden chat action hover strip #642

The previous fix moved the hover group onto the message shell, but the action row still occupied layout space while invisible. That invisible row kept expanding the shell hit area, so moving the pointer into the empty metadata strip could still reveal copy and timestamp controls.

Collapse the action row to zero height by default and expand it only while the message shell is hovered or focused. Keep message content spacing separate from the action row so hidden controls do not create a hover target.

Constraint: Copy/fork controls must remain reachable after the bubble reveals them.
Rejected: Use display:none for the action row | would remove the keyboard focus path entirely.
Confidence: high
Scope-risk: narrow
Directive: Keep hidden message metadata rows out of normal hover hit-testing; do not reintroduce invisible layout space around chat bubbles.
Tested: cd desktop && bun run test src/components/chat/MessageList.test.tsx --run -t "keeps user actions anchored"
Tested: cd desktop && bun run test src/components/chat/MessageList.test.tsx --run
Tested: cd desktop && bun run test src/components/chat/UserMessage.test.tsx --run
Tested: bun run check:desktop
Tested: git diff --check
Not-tested: Live Tauri native hover smoke
Related: #642
---
 .../src/components/chat/AssistantMessage.tsx  |  2 +-
 .../src/components/chat/MessageActionBar.tsx  |  2 +-
 .../src/components/chat/MessageList.test.tsx  |  5 +--
 desktop/src/components/chat/UserMessage.tsx   | 34 ++++++++++---------
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/desktop/src/components/chat/AssistantMessage.tsx b/desktop/src/components/chat/AssistantMessage.tsx
index 4bb938aa..f75c9463 100644
--- a/desktop/src/components/chat/AssistantMessage.tsx
+++ b/desktop/src/components/chat/AssistantMessage.tsx
@@ -68,7 +68,7 @@ export const AssistantMessage = memo(function AssistantMessage({ content, isStre
       <div
         data-message-shell="assistant"
         data-layout={documentLayout ? 'document' : 'bubble'}
-        className={`group flex min-w-0 flex-col items-start gap-2 ${
+        className={`group flex min-w-0 flex-col items-start ${
           documentLayout
             ? 'w-full max-w-full'
             : 'max-w-[88%] sm:max-w-[80%] lg:max-w-[72%]'
diff --git a/desktop/src/components/chat/MessageActionBar.tsx b/desktop/src/components/chat/MessageActionBar.tsx
index a0d09102..13c649d1 100644
--- a/desktop/src/components/chat/MessageActionBar.tsx
+++ b/desktop/src/components/chat/MessageActionBar.tsx
@@ -41,7 +41,7 @@ export function MessageActionBar({
     <div
       data-message-actions
       data-align={align}
-      className={`invisible flex w-full opacity-0 transition-opacity duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 ${
+      className={`pointer-events-none mt-0 flex h-0 w-full overflow-hidden opacity-0 transition-[height,margin-top,opacity] duration-150 group-hover:pointer-events-auto group-hover:mt-2 group-hover:h-7 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:mt-2 group-focus-within:h-7 group-focus-within:opacity-100 ${
         align === 'end' ? 'justify-end' : 'justify-start'
       }`}
     >
diff --git a/desktop/src/components/chat/MessageList.test.tsx b/desktop/src/components/chat/MessageList.test.tsx
index 0b796c15..fa2f865a 100644
--- a/desktop/src/components/chat/MessageList.test.tsx
+++ b/desktop/src/components/chat/MessageList.test.tsx
@@ -2743,8 +2743,9 @@ describe('MessageList nested tool calls', () => {
     expect(assistantShell?.className).not.toContain('ml-10')
     expect(userActions?.getAttribute('data-align')).toBe('end')
     expect(assistantActions?.getAttribute('data-align')).toBe('start')
-    expect(userActions?.className).toContain('invisible')
-    expect(userActions?.className).toContain('group-hover:visible')
+    expect(userActions?.className).toContain('h-0')
+    expect(userActions?.className).toContain('group-hover:h-7')
+    expect(userActions?.className).not.toContain('invisible')
     expect(within(userActions as HTMLElement).getByText('5m ago')).toBeTruthy()
     expect(within(assistantActions as HTMLElement).getByText('2h ago')).toBeTruthy()
   })
diff --git a/desktop/src/components/chat/UserMessage.tsx b/desktop/src/components/chat/UserMessage.tsx
index 6aa0576d..0076bd29 100644
--- a/desktop/src/components/chat/UserMessage.tsx
+++ b/desktop/src/components/chat/UserMessage.tsx
@@ -17,24 +17,26 @@ export const UserMessage = memo(function UserMessage({ content, attachments, bra
     <div className="mb-5 flex justify-end">
       <div
         data-message-shell="user"
-        className="group flex min-w-0 max-w-[82%] flex-col items-end gap-2 sm:max-w-[78%] lg:max-w-[72%]"
+        className="group flex min-w-0 max-w-[82%] flex-col items-end sm:max-w-[78%] lg:max-w-[72%]"
       >
-        {attachments && attachments.length > 0 && (
-          <AttachmentGallery attachments={attachments} variant="message" />
-        )}
+        <div className="flex max-w-full flex-col items-end gap-2">
+          {attachments && attachments.length > 0 && (
+            <AttachmentGallery attachments={attachments} variant="message" />
+          )}
 
-        {hasText && (
-          <div
-            className="min-w-0 max-w-full bg-[var(--color-surface-user-msg)] px-4 py-3 text-sm leading-relaxed text-[var(--color-text-primary)] whitespace-pre-wrap break-words"
-            style={{
-              borderRadius: '18px 4px 18px 18px',
-              overflowWrap: 'anywhere',
-              wordBreak: 'break-word',
-            }}
-          >
-            {content}
-          </div>
-        )}
+          {hasText && (
+            <div
+              className="min-w-0 max-w-full bg-[var(--color-surface-user-msg)] px-4 py-3 text-sm leading-relaxed text-[var(--color-text-primary)] whitespace-pre-wrap break-words"
+              style={{
+                borderRadius: '18px 4px 18px 18px',
+                overflowWrap: 'anywhere',
+                wordBreak: 'break-word',
+              }}
+            >
+              {content}
+            </div>
+          )}
+        </div>
 
         {hasText && (
           <MessageActionBar