From 1143048ec38034e6655443afbfa7844f3c8c5bf3 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 5 Feb 2026 19:49:01 +0530
Subject: [PATCH] feat(14-02): add responsive styling with filename truncation

- Add flexWrap to header (name + timestamp wrap on narrow windows)
- Change filename maxWidth from 200px to 100% (takes available width)
- Add flexShrink: 0 to file size and paperclip icon (never shrink)
- Add fontSize: 13px to file size for consistent sizing
- Remove marginRight from paperclip icon (gap handles spacing)
- Ensure minWidth: 0 on content container for text-overflow to work
- Add comment clarifying header layout
- Layout responsive at different window sizes with proper truncation
---
 jam-ui/src/components/client/chat/JKChatMessage.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/jam-ui/src/components/client/chat/JKChatMessage.js b/jam-ui/src/components/client/chat/JKChatMessage.js
index 8217ee099..c60558403 100644
--- a/jam-ui/src/components/client/chat/JKChatMessage.js
+++ b/jam-ui/src/components/client/chat/JKChatMessage.js
@@ -100,7 +100,7 @@ const JKChatMessage = ({ message }) => {
 
     const fileIconStyle = {
       fontSize: '16px',
-      marginRight: '4px'
+      flexShrink: 0
     };
 
     return (
@@ -110,7 +110,8 @@ const JKChatMessage = ({ message }) => {
 
         {/* Attachment content */}
         <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', marginBottom: '4px' }}>
+          {/* Header: Name + Timestamp */}
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: '8px', marginBottom: '4px', flexWrap: 'wrap' }}>
             <span style={{ fontWeight: 600, fontSize: '14px', color: '#212529' }}>{senderName || 'Unknown'}</span>
             <span style={{ fontSize: '12px', color: '#6c757d' }}>{formatTimestamp(createdAt)}</span>
           </div>
@@ -135,7 +136,7 @@ const JKChatMessage = ({ message }) => {
                 color: '#1976d2',
                 textDecoration: 'underline',
                 fontWeight: 600,
-                maxWidth: '200px',
+                maxWidth: '100%',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
@@ -147,7 +148,9 @@ const JKChatMessage = ({ message }) => {
               {attachmentName}
             </span>
             {attachmentSize && (
-              <span style={{ color: '#6c757d', flexShrink: 0 }}>({formatFileSize(attachmentSize)})</span>
+              <span style={{ color: '#6c757d', fontSize: '13px', flexShrink: 0 }}>
+                ({formatFileSize(attachmentSize)})
+              </span>
             )}
           </div>
         </div>