Skip to content

fix(web): move copy button to inline layout to prevent tool card overlap#404

Merged
hqhq1025 merged 1 commit intotiann:mainfrom
hqhq1025:fix/copy-button-overlap
Apr 6, 2026
Merged

fix(web): move copy button to inline layout to prevent tool card overlap#404
hqhq1025 merged 1 commit intotiann:mainfrom
hqhq1025:fix/copy-button-overlap

Conversation

@hqhq1025
Copy link
Copy Markdown
Collaborator

@hqhq1025 hqhq1025 commented Apr 6, 2026

Problem

The assistant message copy button was absolutely positioned (right-0 top-0) over the entire message content area. When messages contain both text and tool calls (e.g. TodoWrite task list), the button overlapped the tool card UI, looking like a misplaced button on the task list.

Root cause

<button className="absolute right-0 top-0"> inside <div className="relative pr-8"> pins the button to the top-right of the whole message block. When tool cards render below the text, the button visually sits on top of the first content element, which may be a tool card if text is short or absent.

Fix

Move the copy button from absolute positioning inside the content wrapper to an inline flex layout after the content:

  • Button renders at the bottom-right of the message, below all content (text + tool cards)
  • Never overlaps tool cards regardless of content order
  • Hover-to-reveal behavior preserved (sm:opacity-0 sm:group-hover/msg:opacity-100)
  • pr-8 padding removed (no longer needed for absolute positioning)
  • getAssistantCopyText remains unchanged — mixed text+tool messages stay copyable

Test plan

  • Typecheck passes
  • Verify: pure text message shows copy button at bottom-right on hover
  • Verify: text+tool message shows copy button below tool cards on hover
  • Verify: tool-only message shows no copy button (no text to copy)

The copy button was absolutely positioned (right-0 top-0) over the
entire message content area. When assistant messages contain both text
and tool calls (e.g. TodoWrite), the button overlapped the tool card UI.

Move the button from absolute positioning inside the content wrapper to
an inline flex layout after the content. This places it at the bottom-
right of the message, below all content (text + tool cards), so it never
overlaps anything. The hover-to-reveal behavior is preserved.

Also restores getAssistantCopyText to its original logic so mixed
text+tool messages remain copyable (the previous fix of suppressing the
button entirely for mixed messages was too aggressive).

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
Copy link
Copy Markdown

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

Findings

  • No issues identified in the modified lines.

Summary

  • Review mode: initial
  • No actionable issues found in web/src/components/AssistantChat/messages/AssistantMessage.tsx after checking the changed lines against adjacent message-rendering code.
  • Residual risk: assistant copy-button placement and hover visibility for text-only vs. mixed text+tool messages still rely on manual UI verification; no web test in repo covers that interaction.

Testing

  • Not run in this runner: bun is unavailable (/bin/bash: bun: command not found).
  • Existing coverage in repo does not exercise assistant copy-button layout/visibility states.

HAPI Bot

@hqhq1025 hqhq1025 merged commit 7ba15d1 into tiann:main Apr 6, 2026
2 checks passed
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.

1 participant