From a0797e5c45c36b65266330f051c8f4b933f5820e Mon Sep 17 00:00:00 2001
From: Aryan-Verma-999 <anon999.420@gmail.com>
Date: Wed, 11 Mar 2026 14:23:06 +0530
Subject: [PATCH] fix(ui): resolve attachment metadata text overlap on mobile
 viewports

---
 .../AttachmentHandler/AttachmentMetadata.js   | 44 ++++---------------
 1 file changed, 9 insertions(+), 35 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 0c4eda27a..7210443e6 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -85,49 +85,23 @@ const AttachmentMetadata = ({
           flex-direction: row;
           align-items: center;
           gap: 8px;
-          @media (max-width: 420px) {
-            flex-direction: column;
-            align-items: flex-start;
-          }
+          flex-wrap: wrap;
         `}
       >
-        <Box
-          css={css`
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            gap: 4px;
-            @media (max-width: 420px) {
-              flex-direction: column;
-              align-items: flex-start;
-            }
-          `}
-        >
-          <Tooltip text={attachment?.title} position="down">
-            <p
-              css={css`
-                margin: 0;
-                font-size: 12px;
-                opacity: 0.7;
-              `}
-            >
-              {attachment?.title?.length > 22
-                ? `${attachment.title.substring(0, 22)}...`
-                : attachment?.title}
-            </p>
-          </Tooltip>
-          <Box
+        <Tooltip text={attachment?.title} position="down">
+          <p
             css={css`
+              margin: 0;
               font-size: 12px;
               opacity: 0.7;
-              @media (max-width: 420px) {
-                margin-left: 0;
-              }
             `}
           >
+            {attachment?.title?.length > 20
+              ? `${attachment.title.substring(0, 20)}...`
+              : attachment?.title}{' '}
             ({getFormattedFileSize()})
-          </Box>
-        </Box>
+          </p>
+        </Tooltip>
 
         <Box
           css={css`