Message timestamp overlaps on small screens

[priyapathak39]

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.

[priyapathak39]

Hi 👋

I’d like to work on this issue.

Planning to fix it by updating the message container layout to support wrapping (using flex-wrap / word-break) so the timestamp moves below the text on smaller screens.

Please let me know if this approach works. Thanks!