RocketChat / RocketChat/Rocket.Chat

MessageToolBox dropdown UX improvement

Open
#28,515 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

type: improvement
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

The message toolbox dropdown gets shrink when you view the options for the last few messages.

Steps to reproduce:
  1. Go to any chat
  2. Click on three dots for the bottom few messages on screen to view message options
  3. You will notice that the drop down is scrollable but shrink
Expected behavior:

In the case of bottom few messages on screen, the message options should be a DropUp depending upon the space between the message and the message Box.

Actual behavior:
Screenshot 2023-03-21 at 7 15 19 AM

This is the current behavior, but its ambiguous.
Sometimes it works as expected, but mostly it does not.

Screenshot 2023-03-21 at 7 12 39 AM
Server Setup Information:
  • Version of Rocket.Chat Server: 6.0.0
  • Operating System: MacOS
  • Deployment Method: yarn dsv
  • Number of Running Instances: 1
  • NodeJS Version: 14.21.2
Client Setup Information
  • Desktop App or Browser Version: Firefox 111.0 (64-bit)
  • Operating System: MacOS

Contributor guide

Open the contributing guide

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 issue in a chat and opening the message toolbox on messages near the bottom of the viewport. Trace the message toolbox dropdown entry point and its positioning behavior; done means the options open upward when there is insufficient space below and remain usable without unintended shrinking.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.