fix(ui): prevent message timestamp overlap on small screens

[priyapathak39]

Fixes #1257

This PR resolves an issue where message timestamps overlap with text on smaller screen sizes.

Solution:

• Added flex-wrap to allow elements to wrap
• Applied word-break to ensure proper text wrapping

This improves layout and readability on small screens.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[7vignesh]

Hey @priyapathak39 , The approach with flex-wrap is in the right direction, but there are a few things to address before this can be merged.

---

🔴 Unrelated files in the PR (needs cleanup)

The PR includes files that shouldn't be committed:

• .tmp/v8-compile-cache/... — these are local Node.js compile cache files. Please add .tmp/ to .gitignore and remove them from the branch.
• .yarn/releases/yarn-berry.cjs deleted + .yarnrc.yml modified — this removes the yarnPath entry and breaks the Yarn Berry setup the project uses. Please revert these unless there's a specific reason.
• yarn.lock has ~13k lines changed, suggesting it was regenerated with a different Yarn version — this can cause dependency resolution issues for others. Please rebase your branch and let Yarn regenerate the lockfile naturally.
• packages/react/.eslintrc.json changes appear unrelated to this fix — best kept in a separate PR.

---

🟡 CSS approach — minor concern

EmbeddedChat is an embeddable widget, so it can be placed in narrow containers regardless of the viewport size. The hardcoded @media (max-width: 480px) breakpoint may miss overlap cases when the widget is embedded in a narrow div on a large screen.

Consider relying purely on flex-wrap with a min-width constraint on the timestamp element instead of a viewport-based media query.

---

✅ What looks good

• flex-wrap: wrap on the header container — correct fix.
• flex-basis: 100% + margin-left: 0 on the timestamp — solid idea.

---

Would suggest creating a clean branch with only the Message.styles.js change and a proper rebase — that'll make it much easier to review and merge quickly. Happy to help if you need guidance! 🙂

[priyapathak39]

Hey Vignesh, Thank you for your detailed guidance on this PR! I will be looking into all the issues you raised and will make sure to clean up the unrelated files, including deleting the temp files and anything else that needs to be removed or reverted. I'll also create a clean branch as suggested. Thanks again for the help! Best, Priya Pathak

…

On Sat, 4 Apr 2026, 17:20 vignesh Gopikrishnan, ***@***.***> wrote: *7vignesh* left a comment (RocketChat/EmbeddedChat#1258) <#1258 (comment)> Hey @priyapathak39 <https://github.com/priyapathak39> , The approach with flex-wrap is in the right direction, but there are a few things to address before this can be merged. ------------------------------ 🔴 Unrelated files in the PR (needs cleanup) The PR includes files that shouldn't be committed: - *.tmp/v8-compile-cache/...* — these are local Node.js compile cache files. Please add .tmp/ to .gitignore and remove them from the branch. - *.yarn/releases/yarn-berry.cjs deleted + .yarnrc.yml modified* — this removes the yarnPath entry and breaks the Yarn Berry setup the project uses. Please revert these unless there's a specific reason. - *yarn.lock* has ~13k lines changed, suggesting it was regenerated with a different Yarn version — this can cause dependency resolution issues for others. Please rebase your branch and let Yarn regenerate the lockfile naturally. - *packages/react/.eslintrc.json* changes appear unrelated to this fix — best kept in a separate PR. ------------------------------ 🟡 CSS approach — minor concern EmbeddedChat is an embeddable widget, so it can be placed in narrow containers regardless of the viewport size. The hardcoded @media (max-width: 480px) breakpoint may miss overlap cases when the widget is embedded in a narrow div on a large screen. Consider relying purely on flex-wrap with a min-width constraint on the timestamp element instead of a viewport-based media query. ------------------------------ ✅ What looks good - flex-wrap: wrap on the header container — correct fix. - flex-basis: 100% + margin-left: 0 on the timestamp — solid idea. ------------------------------ Would suggest creating a *clean branch with only the Message.styles.js change* and a proper rebase — that'll make it much easier to review and merge quickly. Happy to help if you need guidance! 🙂 — Reply to this email directly, view it on GitHub <#1258 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BVCIK4XXMXHABAM7EH3T3BT4UDZHHAVCNFSM6AAAAACXGNTE26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DCOBWHE4TOOBXG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>