RocketChat / RocketChat/EmbeddedChat
Message timestamp overlaps on small screens
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 165
- Forks
- 381
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 1
Description
On smaller screen sizes or narrow browser windows, the message timestamp overlaps with the message text content. This occurs because the container does not allow the elements to wrap, leading to a UI collision that makes the text unreadable.
Steps to reproduce:
Open the Chat UI/component.
Enter a message long enough to fill a portion of the row.
Resize the browser window to a narrow width (e.g., mobile view/375px).
Observe the timestamp position relative to the text.
Expected behavior:
The timestamp should automatically wrap to a new line below the message text when horizontal space is insufficient, maintaining readability.
Actual behavior:
The timestamp remains on the same horizontal line and overlaps the end of the message text.
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 locating the Chat UI/component and inspect the message row layout at narrow widths such as 375px. Reproduce the overlap with a long message, then adjust the layout so the timestamp wraps below the message when horizontal space is insufficient. Verify that the message text and timestamp remain readable on small screens.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100