RocketChat / RocketChat/Rocket.Chat
Inconsistent avatar resizing in Directory Users Table compared to Admin Table
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Description:
In the Directory > Users tab, user avatars shrink incorrectly when:
- Screen width is reduced
- Users have long display names or usernames
- Compared to the Admin > Users table, where avatars maintaina consistent size
Steps to reproduce:
- Create a test user with a long display name
- Go to Directory > Users tab
- Reduce the browser window
- Observe avatars shrinking in size
- Compare with Admin > Users table (avatars maintain fixed size)
Actual behaviour:
Avatars shrink with the available space, becoming inconsistent with long names.
Directory> Users Tab
https://github.com/user-attachments/assets/c66147cf-4bed-41b5-8f49-87a3321616b2
Expected behaviour:
Avatars should maintain a consistent size.
Text should truncate with ellipsis ... when space is limited, similar to Admin Users table behaviour.
Admin> Users Tab
https://github.com/user-attachments/assets/154efaab-22bf-477f-b0c5-a4c1330a5856
Server Setup Information:
- Version of Rocket.Chat Server: develop branch (latest)
- Operating System: Linux
- NodeJS Version: 22.16.0
Client Setup Information
- Operating System: linux
Additional context
none
Relevant logs:
Contributor guide
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 comparing the Directory > Users table with the Admin > Users table while reproducing the issue using a long display name or username and a narrow browser window. Trace the table and avatar presentation entry points, then verify that avatars retain a consistent size and text truncates with an ellipsis in the Directory view.
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
- 48/100