RocketChat / RocketChat/EmbeddedChat

Bug: Message toolbox alignment, hover state stability, and bubble variant positioning

Open
#1,179 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
165
Forks
381
Avg merge
1d 2h
Merged PRs (30d)
1

Description

Description:

The hover toolbox for curved messages is currently feeling a bit broken. Here is what’s going on:

  1. It keeps disappearing: There’s a tiny gap between the icons and the "More" menu. When you move your mouse toward the menu, it hits that empty space and the whole toolbox just shuts down before you can actually click anything.

  2. The labels are confusing: All the other icons show their labels pointing downwards, but the "More" menu pops up upwards. It looks messy and doesn’t match the rest of the style.

It's covering the message: The toolbox sits right on the end edge of the message box. Because it pops up exactly where the text ends/starts, it ends up hiding the last letter, so you can't actually read the full message without the icons getting in the way.

Steps to reproduce:

Steps to reproduce

  1. Open the chat and ensure the "Bubble" or "Curve" message style is active.

  2. Hover your mouse over any message to make the floating action toolbox appear.

  3. Check the overlap: Look closely at the start or the end of the message bubble—you’ll see that the toolbox is sitting too close and actually covering the first or last letter of the text.

  4. Test the "More" menu: Try moving your mouse from the main icons toward the menu options. You’ll notice the entire toolbox just vanishes before you can even click anything because of the tiny gap in between.

  5. Check the popup labels: Notice that the "More" label pops up upwards, making it hard to see and inconsistent with the other icons nearby which correctly pop up downwards. This inconsistency is very obvious when you compare how the labels open on opposite sides of the chat.

Expected behavior:

https://github.com/user-attachments/assets/53873b29-e025-48d0-bcaa-47ee88b62b51

Actual behavior:
Image Image Image Image

https://github.com/user-attachments/assets/92f99750-9735-4f9a-aee9-0883bfa9e41d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the hover toolbox with Bubble and Curve message styles in the chat, then locate the component responsible for the floating action controls and More menu. Done means the toolbox stays open while moving to More, labels use the same downward placement, and the controls no longer cover message text.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.