[FIX] Message toolbar buttons overlaps with text.

[nakul-py]

Adding solid background to message toolbar buttons and change their position to bottom right corner of the message.

Screencast.From.2026-03-12.16-26-19.mp4

• Closes Message action toolbar overlaps message text on hover #375

[github-actions]

👈 Launch a Binder on branch nakul-py/jupyter-chat/toolba-buttons

[nakul-py]

cc @brichet @andrii-i

[brichet]

Don't know if we want a grey background on all messages.

@andrii-i any opinion on it ?

[andrii-i]

@nakul-py thank you for working on this.

@nakul-py @brichet I think it's a clear improvement vs current state where icon has no background and still overlaps with text. As I mention in #375, ideally we'd position the toolbar so it never overlaps with message text (e.g., above the message bubble or in a dedicated gutter) but If overlapping is unavoidable, giving the toolbar a solid/opaque background so buttons are clearly distinguishable from the text beneath would also be an improvement.

Without this PR:

With this PR:

[andrii-i]

@nakul-py Could you try positioning the toolbar so it never overlaps message text (e.g., above the message bubble or in a dedicated gutter) approach? As of now this PR is an improvement but we still have a button overlapping with text. Ideally we'd like to avoid it.

Also note that as @brichet points out currently this PR changes background color of the messages box, we definitely would like to avoid that.

[brichet]

I agree that this is already a good improvement, thanks @nakul-py.

Could you try positioning the toolbar so it never overlaps message text

I wonder where the toolbar could be positioned without taking more space or moving the messages when displayed.

Also note that as @brichet #378 (comment) currently this PR changes background color of the messages box, we definitely would like to avoid that.

I don't think this PR changes the message background.
My comment was about the toolbar background, which has the same color as the message background for the current user (grey). Therefore, its visibility looks different over a current user message (screencast in description) then a collaborator message (screenshot in #378 (comment))

[nakul-py]

@brichet @andrii-i Now i have changed the position of the message toolbar and updated the PR description.

How does it looks to you?

[brichet]

Thanks @nakul-py for updating it.
While I also like the update you made, I think it was a better UX to have it over the text on top right corner, I find it more discoverable for long messages, and the toolbar doesn't overlap the message after.

But I don't have a strong opinion on it, and will be fine with any option.

[nakul-py]

I think it was a better UX to have it over the text on top right corner.

Sure i will give this a try if it does not overlaps with message time.