RocketChat / RocketChat/EmbeddedChat
Bug: Message toolbox alignment, hover state stability, and bubble variant positioning
Nobody has claimed this yet.
- 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:
-
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.
-
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
-
Open the chat and ensure the "Bubble" or "Curve" message style is active.
-
Hover your mouse over any message to make the floating action toolbox appear.
-
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.
-
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.
-
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:
https://github.com/user-attachments/assets/92f99750-9735-4f9a-aee9-0883bfa9e41d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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