Skip to content

fix: the user-message copy button hover behavior#1587

Open
veeradyani222 wants to merge 1 commit intodifferent-ai:devfrom
veeradyani222:fix-copy-button-positioning
Open

fix: the user-message copy button hover behavior#1587
veeradyani222 wants to merge 1 commit intodifferent-ai:devfrom
veeradyani222:fix-copy-button-positioning

Conversation

@veeradyani222
Copy link
Copy Markdown

20260428-0936-56.5835206.mp4

Fixed the user-message copy button hover behavior.

The copy button used to sit inside the message bubble, so on longer user messages it could overlap the text and make the bubble look messy. I moved the copy action outside the bubble, positioned at the bottom-right on hover, so the message content keeps its full readable space.

I also added an invisible hover area across the existing gap between the user message and the assistant reply. That keeps the copy button reachable without adding extra vertical spacing or shifting the transcript layout.

/closes #1586

Copilot AI review requested due to automatic review settings April 28, 2026 09:41
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
openwork-landing Ready Ready Preview, Comment, Open in v0 Apr 28, 2026 9:41am

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 28, 2026

@veeradyani222 is attempting to deploy a commit to the Different AI Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

@veeradyani222
Copy link
Copy Markdown
Author

Hi Ben! This is my first contribution to Openwork. Hope you approve it. Lmk for any changes!
@benjaminshafii

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes the user-message “Copy message” button overlapping user bubble content by moving the copy action outside the user bubble and adding a hoverable gap area to keep the button reachable without altering transcript spacing.

Changes:

  • Makes each message row relative and adjusts CSS containment to allow user copy UI to render outside the bubble.
  • Keeps assistant copy button inside its message container, but moves user copy button to an absolutely-positioned area below the bubble on hover.
  • Adds an invisible hover strip in the gap below user messages to make the copy button easier to reach.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread apps/app/src/react-app/domains/session/surface/message-list.tsx
Comment thread apps/app/src/react-app/domains/session/surface/message-list.tsx
@veeradyani222
Copy link
Copy Markdown
Author

@src-opn have a look!

@src-opn
Copy link
Copy Markdown
Collaborator

src-opn commented Apr 29, 2026

No need to tag people
the implementation is in the right direction, but now causes UI confusion since theres no separation between the copy button and the message below
have another go

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Copy button overlaps message text in session chat bubbles

3 participants