bug(web): copy button on assistant messages always visible on mobile, looks misplaced

[hqhq1025]

Problem

On mobile (iPhone PWA), the copy button on assistant messages is always visible and positioned at the bottom-right edge of the message. It visually floats between the message content and the bottom status bar (online / Yolo), making it:

1. Unclear which element it belongs to — looks detached from the message bubble
2. Too close to the bottom status bar — easy to mistap
3. Always visible — on desktop this would typically be hover-only; on mobile it clutters the UI since every message shows it

Expected Behavior

On mobile, the copy button should either:

• Only appear on long-press (standard mobile pattern — show a context menu with Copy/Quote/etc.)
• Or be embedded inside the message card with proper padding, not floating outside it

Environment

• iPhone, iOS PWA
• Observed on assistant reply messages in session chat view

[github-actions]

I confirmed the current web implementation matches what you described on mobile.

For assistant messages, the copy action is rendered as a separate row after the message content, not inside a padded message bubble. It is also intentionally visible on small screens: the class on that row is opacity-60 sm:opacity-0 sm:group-hover/msg:opacity-100, which means the hover-only behavior only starts at sm and above. I also did not find any long-press or context-menu handling for assistant-message copy actions in the session chat components.

For comparison, user messages keep the copy button inline with the bubble/status row, so assistant and user messages are currently implemented differently.

Relevant code:

• web/src/components/AssistantChat/messages/AssistantMessage.tsx:55 - assistant message renders content and copy control as sibling blocks
• web/src/components/AssistantChat/messages/AssistantMessage.tsx:60 - copy control stays visible below sm; hover-only behavior applies only from sm upward
• web/src/components/AssistantChat/messages/UserMessage.tsx:64 - user message uses a rounded bubble wrapper
• web/src/components/AssistantChat/messages/UserMessage.tsx:71 - user copy button/status render inline inside the bubble layout
• web/src/components/AssistantChat/HappyComposer.tsx:757 - chat composer renders the bottom status bar below the thread area
• web/src/components/AssistantChat/StatusBar.tsx:165 - status bar shows the connection/mode labels at the bottom

---

HAPI Bot