From 645ca7f03cf3cd315150ff511104a8b2734cf6a2 Mon Sep 17 00:00:00 2001
From: priyapathak802 <pathakpriya3069@gmail.com>
Date: Mon, 6 Apr 2026 17:04:30 +0530
Subject: [PATCH] fix(ui): prevent message timestamp overlap in small
 containers

---
 packages/react/src/views/Message/Message.styles.js | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js
index 03236addb..5fb29c706 100644
--- a/packages/react/src/views/Message/Message.styles.js
+++ b/packages/react/src/views/Message/Message.styles.js
@@ -1,3 +1,4 @@
+
 import { css } from '@emotion/react';
 
 export const getMessageStyles = ({ theme }) => {
@@ -11,9 +12,6 @@ export const getMessageStyles = ({ theme }) => {
       padding-left: 2.25rem;
       padding-right: 2.25rem;
       color: ${theme.colors.foreground};
-      @media (max-width: 768px) {
-        padding-left: 0.8rem;
-      }
     `,
     messageEditing: css`
       background-color: ${theme.colors.secondary};
@@ -77,9 +75,6 @@ export const getMessageDividerStyles = (theme) => {
       margin-bottom: 0.75rem;
       padding-left: 1.25rem;
       padding-right: 1.25rem;
-      @media (max-width: 780px) {
-        z-index: 1;
-      }
     `,
 
     dividerContent: css`
@@ -129,9 +124,6 @@ export const getUnreadMessageDividerStyles = (theme, mode) => {
       margin-bottom: 0.75rem;
       padding-left: 1.25rem;
       padding-right: 1.25rem;
-      @media (max-width: 780px) {
-        z-index: 1;
-      }
     `,
 
     dividerContent: css`
@@ -165,6 +157,7 @@ export const getMessageHeaderStyles = (theme) => {
     header: css`
       display: flex;
       flex-direction: row;
+      flex-wrap: wrap;
       flex-grow: 0;
       flex-shrink: 1;
       min-width: 1px;
@@ -228,7 +221,8 @@ export const getMessageHeaderStyles = (theme) => {
       font-weight: 400;
       line-height: 1rem;
       flex-shrink: 0;
-      margin-left: 0.25rem;
+      margin-left: auto; 
+      min-width: fit-content;   
     `,
     messageStatus: css`
       display: flex;