From 15e3934f5cb0b6c51527d0bf7bd561fadf91663c Mon Sep 17 00:00:00 2001
From: Rohan Rose <rohanjml07@gmail.com>
Date: Fri, 16 Oct 2026 18:24:31 +0000
Subject: [PATCH] fix: prevent message timestamp overlap on small screens
 (#1257)

Adds flex-wrap to the message header and forces the timestamp onto its
own row below 480px, avoiding overlap with the username/action text on
narrow viewports.

Fixes #1257
---
 packages/react/src/views/Message/Message.styles.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 7b2fc9c84..8eb39af73 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -185,6 +185,7 @@ export const getMessageHeaderStyles = (theme) => {
     header: css`
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
       flex-grow: 0;
       flex-shrink: 1;
       min-width: 1px;
@@ -192,6 +193,10 @@ export const getMessageHeaderStyles = (theme) => {
       margin-bottom: 0.125rem;
       gap: 0.125rem;
       align-items: center;
+
+      @media (max-width: 480px) {
+        align-items: flex-start;
+      }
     `,
 
     name: css`
@@ -249,6 +254,11 @@ export const getMessageHeaderStyles = (theme) => {
       line-height: 1rem;
       flex-shrink: 0;
       margin-left: 0.25rem;
+
+      @media (max-width: 480px) {
+        flex-basis: 100%;
+        margin-left: 0;
+      }
     `,
     messageStatus: css`
       display: flex;