EmbeddedChat icon indicating copy to clipboard operation
EmbeddedChat copied to clipboard

Bug: UI Jumps When Hovering Over Last Message's MessageToolbox Options

Open Abbas-Askari opened this issue 11 months ago • 1 comments

Description:

Hovering over the MessageToolbox buttons (reaction, reply, qoute, star, etc.) of the last message causes a tooltip to appear. This tooltip increases the height of the message list container, making the UI jump unexpectedly. This behavior is quite irritating and disrupts the user experience. The attached video shows how annoying the jumping is when the cursor is moved across the buttons. Note: If the user is not fully scrolled down to view the tooltip, It appear as if it is overflowing the container (first 4 seconds of the video)

Steps to reproduce:

  • Open Rocket.Chat's Embedded Chat.
  • Scroll to the last message in the chat.
  • Slide over the options buttons (e.g., reaction, reply, qoute, star, etc.).
  • Notice how the tooltip increases the container's height, causing an annoying UI jumps.

Expected behavior:

  • The tooltip should not alter the container's height.
  • The UI should remain stable without sudden shifts.

Actual behavior:

  • The tooltip increases the height of the message list container.
  • This causes a frustrating UI jump, making it irritating to interact with the last message.

Additional Information:

Video:

https://github.com/user-attachments/assets/d028b96b-6bd6-4dc5-b331-5db0bd0eeddc

Abbas-Askari avatar Feb 09 '25 11:02 Abbas-Askari

I'll create a PR.

Abbas-Askari avatar Feb 09 '25 11:02 Abbas-Askari