Skip to content

fix(ui): prevent message timestamp overlap in small containers#1272

Open
priyapathak39 wants to merge 1 commit intoRocketChat:developfrom
priyapathak39:fix-timestamp-clean
Open

fix(ui): prevent message timestamp overlap in small containers#1272
priyapathak39 wants to merge 1 commit intoRocketChat:developfrom
priyapathak39:fix-timestamp-clean

Conversation

@priyapathak39
Copy link
Copy Markdown

Changes

  • Removed viewport-based media queries
  • Added flex-wrap: wrap to the message header
  • Updated timestamp styling using:
    • margin-left: auto
    • min-width: fit-content
    • flex-shrink: 0

Why this change?
EmbeddedChat is used inside flexible containers, not just full-screen views.
Using media queries based on viewport width does not handle all cases.

This solution ensures the layout adapts correctly regardless of container size.

Result

  • No timestamp overlap
  • Works in small containers and embedded views
  • Maintains clean responsive layout

@CLAassistant
Copy link
Copy Markdown

CLA assistant check
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.

@priyapathak39
Copy link
Copy Markdown
Author

Hi @vignesh,

Thanks for your feedback!

  • Removed viewport-based media queries
  • Updated layout to rely on flex-wrap
  • Added min-width and flex-shrink constraints to timestamp

Tested in narrow containers and confirmed no overlap.

Please let me know if anything else needs improvement 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants