From badf7d6b58ebe8ce0666140ae809ffa21cd78bbe Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 7 Jan 2025 23:27:10 +0530
Subject: [PATCH 1/9] add Tooltips and size

---
 .../AttachmentHandler/AttachmentMetadata.js   | 101 +++++++++++++-----
 1 file changed, 72 insertions(+), 29 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 390cab7b71..ae5d760ab1 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { css } from '@emotion/react';
-import { ActionButton, Box } from '@embeddedchat/ui-elements';
+import { ActionButton, Box, Tooltip } from '@embeddedchat/ui-elements';
 import { Markdown } from '../Markdown';
+import { useState } from 'react';
 
 const AttachmentMetadata = ({
   attachment,
@@ -11,12 +12,13 @@ const AttachmentMetadata = ({
   onExpandCollapseClick,
   isExpanded,
 }) => {
+  const [collapse, setCollapse] = useState(true);
+
   const handleDownload = async () => {
     try {
       const response = await fetch(url);
       const data = await response.blob();
       const downloadUrl = URL.createObjectURL(data);
-
       const anchor = document.createElement('a');
       anchor.href = downloadUrl;
       anchor.download = attachment.title || 'download';
@@ -46,6 +48,10 @@ const AttachmentMetadata = ({
             ? [
                 css`
                   margin: 10px 0px;
+                  display: flex;
+                  flex-direction: row;
+                  align-items: center;
+                  flex-wrap: wrap;
                 `,
               ]
             : css`
@@ -66,45 +72,82 @@ const AttachmentMetadata = ({
           align-items: center;
         `}
       >
-        <p
+        <Tooltip text={attachment.title} position="down">
+          <p
+            css={
+              attachment.description
+                ? [
+                    css`
+                      margin: 3px 0 0 0;
+                      font-size: 12px;
+                      opacity: 0.7;
+                    `,
+                  ]
+                : css`
+                    margin: 22px 0 15px 0;
+                    font-size: 12px;
+                    opacity: 0.7;
+                  `
+            }
+          >
+            {attachment.title.length > 24
+              ? `${attachment.title.substring(0, 24)}...`
+              : attachment.title}
+          </p>
+        </Tooltip>
+        <Box
           css={
             attachment.description
               ? [
                   css`
-                    margin: 0px;
-                    font-size: 14px;
+                    font-size: 12px;
                     opacity: 0.7;
+                    margin-left: 3px;
+                    margin-top: 2px;
                   `,
                 ]
               : css`
-                  margin: 22px 0 15px 0;
-                  font-size: 14px;
+                  font-size: 12px;
                   opacity: 0.7;
+                  margin-left: 3px;
+                  margin-top: 7px;
                 `
           }
         >
-          {attachment.title}
-        </p>
-        <ActionButton
-          ghost
-          icon={isExpanded ? 'chevron-down' : 'chevron-left'}
-          size="small"
-          onClick={onExpandCollapseClick}
-          css={css`
-            margin-left: 10px;
-            margin-top: ${attachment.description ? '3px' : '13px'};
-          `}
-        />
-        <ActionButton
-          ghost
-          icon="download"
-          size="small"
-          onClick={handleDownload}
-          css={css`
-            margin-left: 10px;
-            margin-top: 5px;
-          `}
-        />
+          (
+          {attachment.image_size
+            ? (attachment.image_size / 1024).toFixed(2)
+            : 0}{' '}
+          kB)
+        </Box>
+
+        <Tooltip text={collapse ? 'Collapse' : 'Expand'} position="top">
+          <ActionButton
+            ghost
+            icon={isExpanded ? 'chevron-down' : 'chevron-left'}
+            size="small"
+            onClick={() => {
+              onExpandCollapseClick();
+              setCollapse(!collapse);
+            }}
+            css={css`
+              margin-left: 10px;
+              margin-top: ${attachment.description ? '3px' : '10px'};
+            `}
+          />
+        </Tooltip>
+        <Tooltip text="Download" position="top">
+          <ActionButton
+            ghost
+            icon="download"
+            size="small"
+            onClick={handleDownload}
+            css={css`
+              margin-left: 10px;
+              margin-top: 5px;
+            `}
+          />
+        </Tooltip>
       </Box>
     </Box>
   );

From 14f7c9e76b6fe43d7f507ed2ac6131b148a0a62b Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 7 Jan 2025 23:44:46 +0530
Subject: [PATCH 2/9] fix css

---
 .../src/views/AttachmentHandler/AttachmentMetadata.js  | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index ae5d760ab1..4a487b00f0 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { ActionButton, Box, Tooltip } from '@embeddedchat/ui-elements';
 import { Markdown } from '../Markdown';
-import { useState } from 'react';
 
 const AttachmentMetadata = ({
   attachment,
@@ -12,8 +11,6 @@ const AttachmentMetadata = ({
   onExpandCollapseClick,
   isExpanded,
 }) => {
-  const [collapse, setCollapse] = useState(true);
-
   const handleDownload = async () => {
     try {
       const response = await fetch(url);
@@ -48,10 +45,6 @@ const AttachmentMetadata = ({
             ? [
                 css`
                   margin: 10px 0px;
-                  display: flex;
-                  flex-direction: row;
-                  align-items: center;
-                  flex-wrap: wrap;
                 `,
               ]
             : css`
@@ -121,14 +114,13 @@ const AttachmentMetadata = ({
           kB)
         </Box>
 
-        <Tooltip text={collapse ? 'Collapse' : 'Expand'} position="top">
+        <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
           <ActionButton
             ghost
             icon={isExpanded ? 'chevron-down' : 'chevron-left'}
             size="small"
             onClick={() => {
               onExpandCollapseClick();
-              setCollapse(!collapse);
             }}
             css={css`
               margin-left: 10px;

From b6bfbc34254f8125e6fc6942ac5bf9d9a46342a8 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Fri, 17 Jan 2025 21:56:33 +0530
Subject: [PATCH 3/9] fix-tooltip

---
 .../AttachmentHandler/AttachmentMetadata.js   | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 4a487b00f0..9e71bc9a11 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -114,32 +114,38 @@ const AttachmentMetadata = ({
           kB)
         </Box>
 
-        <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
-          <ActionButton
-            ghost
-            icon={isExpanded ? 'chevron-down' : 'chevron-left'}
-            size="small"
-            onClick={() => {
-              onExpandCollapseClick();
-            }}
-            css={css`
-              margin-left: 10px;
-              margin-top: ${attachment.description ? '3px' : '10px'};
-            `}
-          />
-        </Tooltip>
-        <Tooltip text="Download" position="top">
-          <ActionButton
-            ghost
-            icon="download"
-            size="small"
-            onClick={handleDownload}
-            css={css`
-              margin-left: 10px;
-              margin-top: 5px;
-            `}
-          />
-        </Tooltip>
+        <Box
+          css={css`
+            margin-left: 10px;
+            margin-top: ${attachment.description ? '3px' : '10px'};
+          `}
+        >
+          <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
+            <ActionButton
+              ghost
+              icon={isExpanded ? 'chevron-down' : 'chevron-left'}
+              size="small"
+              onClick={() => {
+                onExpandCollapseClick();
+              }}
+            />
+          </Tooltip>
+        </Box>
+        <Box
+          css={css`
+            margin-left: 10px;
+            margin-top: 5px;
+          `}
+        >
+          <Tooltip text="Download" position="top">
+            <ActionButton
+              ghost
+              icon="download"
+              size="small"
+              onClick={handleDownload}
+            />
+          </Tooltip>
+        </Box>
       </Box>
     </Box>
   );

From d5a02077efc5a6c353b0975d76b755da48af6f2d Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Mon, 3 Feb 2025 23:03:21 +0530
Subject: [PATCH 4/9] responsive

---
 .../AttachmentHandler/AttachmentMetadata.js   | 36 +++++++++++++++++++
 .../AttachmentHandler/VideoAttachment.js      | 20 +++++++++--
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 9e71bc9a11..f40f05ca85 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -35,6 +35,10 @@ const AttachmentMetadata = ({
         css`
           display: flex;
           flex-direction: column;
+          @media (max-width: 420px) {
+            flex-direction: column;
+            align-items: flex-start;
+          }
         `,
         variantStyles.attachmentMetaContainer,
       ]}
@@ -45,10 +49,16 @@ const AttachmentMetadata = ({
             ? [
                 css`
                   margin: 10px 0px;
+                  @media (max-width: 420px) {
+                    margin: 5px 0px;
+                  }
                 `,
               ]
             : css`
                 margin: -7px 0px;
+                @media (max-width: 420px) {
+                  margin: -5px 0px;
+                }
               `
         }
       >
@@ -63,6 +73,10 @@ const AttachmentMetadata = ({
           display: flex;
           flex-direction: row;
           align-items: center;
+          @media (max-width: 420px) {
+            flex-direction: column;
+            align-items: flex-start;
+          }
         `}
       >
         <Tooltip text={attachment.title} position="down">
@@ -74,12 +88,18 @@ const AttachmentMetadata = ({
                       margin: 3px 0 0 0;
                       font-size: 12px;
                       opacity: 0.7;
+                      @media (max-width: 420px) {
+                        margin: 2px 0 0 0;
+                      }
                     `,
                   ]
                 : css`
                     margin: 22px 0 15px 0;
                     font-size: 12px;
                     opacity: 0.7;
+                    @media (max-width: 420px) {
+                      margin: 10px 0 10px 0;
+                    }
                   `
             }
           >
@@ -97,6 +117,10 @@ const AttachmentMetadata = ({
                     opacity: 0.7;
                     margin-left: 3px;
                     margin-top: 2px;
+                    @media (max-width: 420px) {
+                      margin-left: 0;
+                      margin-top: 2px;
+                    }
                   `,
                 ]
               : css`
@@ -104,6 +128,10 @@ const AttachmentMetadata = ({
                   opacity: 0.7;
                   margin-left: 3px;
                   margin-top: 7px;
+                  @media (max-width: 420px) {
+                    margin-left: 0;
+                    margin-top: 5px;
+                  }
                 `
           }
         >
@@ -118,6 +146,10 @@ const AttachmentMetadata = ({
           css={css`
             margin-left: 10px;
             margin-top: ${attachment.description ? '3px' : '10px'};
+            @media (max-width: 420px) {
+              margin-left: 0;
+              margin-top: 5px;
+            }
           `}
         >
           <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
@@ -135,6 +167,10 @@ const AttachmentMetadata = ({
           css={css`
             margin-left: 10px;
             margin-top: 5px;
+            @media (max-width: 420px) {
+              margin-left: 0;
+              margin-top: 5px;
+            }
           `}
         >
           <Tooltip text="Download" position="top">
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 4407481ee4..70db6137d6 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -45,6 +45,9 @@ const VideoAttachment = ({
             line-height: 0;
             border-radius: inherit;
             padding: 0.5rem;
+            @media (max-width: 450px) {
+              padding: 0.3rem;
+            }
           `,
           (type ? variantStyles.pinnedContainer : '') ||
             css`
@@ -62,6 +65,10 @@ const VideoAttachment = ({
                   display: flex;
                   gap: 0.3rem;
                   align-items: center;
+                  @media (max-width: 450px) {
+                    flex-direction: column;
+                    align-items: flex-start;
+                  }
                 `,
                 variantStyles.textUserInfo,
               ]}
@@ -87,11 +94,12 @@ const VideoAttachment = ({
         />
         {isExpanded && (
           <video
-            width={300}
+            width="100%"
             controls
             style={{
               borderBottomLeftRadius: 'inherit',
               borderBottomRightRadius: 'inherit',
+              maxWidth: '300px',
             }}
           >
             <source
@@ -109,6 +117,9 @@ const VideoAttachment = ({
                     line-height: 0;
                     border-radius: inherit;
                     padding: 0.5rem;
+                    @media (max-width: 450px) {
+                      padding: 0.3rem;
+                    }
                   `,
                   (nestedAttachment.type
                     ? variantStyles.pinnedContainer
@@ -128,6 +139,10 @@ const VideoAttachment = ({
                           display: flex;
                           gap: 0.3rem;
                           align-items: center;
+                          @media (max-width: 450px) {
+                            flex-direction: column;
+                            align-items: flex-start;
+                          }
                         `,
                         variantStyles.textUserInfo,
                       ]}
@@ -152,11 +167,12 @@ const VideoAttachment = ({
                   variantStyles={variantStyles}
                 />
                 <video
-                  width={300}
+                  width="100%"
                   controls
                   style={{
                     borderBottomLeftRadius: 'inherit',
                     borderBottomRightRadius: 'inherit',
+                    maxWidth: '300px',
                   }}
                 >
                   <source

From 806fc46bf8a3e2b426024b0401698d8eddfcf10b Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 4 Feb 2025 01:04:55 +0530
Subject: [PATCH 5/9] fix videoAttachment

---
 .../AttachmentHandler/AttachmentMetadata.js   | 77 +++++++++++--------
 .../AttachmentHandler/VideoAttachment.js      | 35 ++++++---
 2 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index f40f05ca85..4612697ee2 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -141,46 +141,57 @@ const AttachmentMetadata = ({
             : 0}{' '}
           kB)
         </Box>
-
         <Box
           css={css`
-            margin-left: 10px;
-            margin-top: ${attachment.description ? '3px' : '10px'};
+            display: flex;
+            flex-direction: row;
+            align-items: center;
             @media (max-width: 420px) {
-              margin-left: 0;
-              margin-top: 5px;
+              flex-direction: row;
+              align-items: flex-start;
             }
           `}
         >
-          <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
-            <ActionButton
-              ghost
-              icon={isExpanded ? 'chevron-down' : 'chevron-left'}
-              size="small"
-              onClick={() => {
-                onExpandCollapseClick();
-              }}
-            />
-          </Tooltip>
-        </Box>
-        <Box
-          css={css`
-            margin-left: 10px;
-            margin-top: 5px;
-            @media (max-width: 420px) {
-              margin-left: 0;
+          <Box
+            css={css`
+              margin-left: 10px;
+              margin-top: ${attachment.description ? '3px' : '10px'};
+              @media (max-width: 420px) {
+                margin-left: 0;
+                margin-top: 5px;
+              }
+            `}
+          >
+            <Tooltip text={isExpanded ? 'Collapse' : 'Expand'} position="top">
+              <ActionButton
+                ghost
+                icon={isExpanded ? 'chevron-down' : 'chevron-left'}
+                size="small"
+                onClick={() => {
+                  onExpandCollapseClick();
+                }}
+              />
+            </Tooltip>
+          </Box>
+          <Box
+            css={css`
+              margin-left: 10px;
               margin-top: 5px;
-            }
-          `}
-        >
-          <Tooltip text="Download" position="top">
-            <ActionButton
-              ghost
-              icon="download"
-              size="small"
-              onClick={handleDownload}
-            />
-          </Tooltip>
+              @media (max-width: 420px) {
+                margin-left: 0;
+                margin-top: 5px;
+              }
+            `}
+          >
+            <Tooltip text="Download" position="top">
+              <ActionButton
+                ghost
+                icon="download"
+                size="small"
+                onClick={handleDownload}
+              />
+            </Tooltip>
+          </Box>
         </Box>
       </Box>
     </Box>
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 029cc3a7f7..e787d10b14 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -66,7 +66,6 @@ const VideoAttachment = ({
                   gap: 0.3rem;
                   align-items: center;
                   @media (max-width: 450px) {
-                    flex-direction: column;
                     align-items: flex-start;
                   }
                 `,
@@ -78,20 +77,36 @@ const VideoAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box
+                css={css`
+                  @media (max-width: 450px) {
+                    margin-top: 0.5rem;
+                  }
+                `}
+              >
+                @{authorName}
+              </Box>
             </Box>
           </>
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.video_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            @media (max-width: 450px) {
+              margin-top: 0.5rem;
+            }
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_url || attachment.video_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <video
             controls

From f70ad2b105fbe9eb873115ebb7796f7a4642706c Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 4 Feb 2025 01:24:15 +0530
Subject: [PATCH 6/9] css

---
 .../AttachmentHandler/AttachmentMetadata.js   | 22 +++++++++----------
 .../AttachmentHandler/VideoAttachment.js      |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 4612697ee2..7a2a4da6b3 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -35,7 +35,7 @@ const AttachmentMetadata = ({
         css`
           display: flex;
           flex-direction: column;
-          @media (max-width: 420px) {
+          @media (max-width: 300px) {
             flex-direction: column;
             align-items: flex-start;
           }
@@ -49,14 +49,14 @@ const AttachmentMetadata = ({
             ? [
                 css`
                   margin: 10px 0px;
-                  @media (max-width: 420px) {
+                  @media (max-width: 300px) {
                     margin: 5px 0px;
                   }
                 `,
               ]
             : css`
                 margin: -7px 0px;
-                @media (max-width: 420px) {
+                @media (max-width: 300px) {
                   margin: -5px 0px;
                 }
               `
@@ -73,7 +73,7 @@ const AttachmentMetadata = ({
           display: flex;
           flex-direction: row;
           align-items: center;
-          @media (max-width: 420px) {
+          @media (max-width: 300px) {
             flex-direction: column;
             align-items: flex-start;
           }
@@ -88,7 +88,7 @@ const AttachmentMetadata = ({
                       margin: 3px 0 0 0;
                       font-size: 12px;
                       opacity: 0.7;
-                      @media (max-width: 420px) {
+                      @media (max-width: 300px) {
                         margin: 2px 0 0 0;
                       }
                     `,
@@ -97,7 +97,7 @@ const AttachmentMetadata = ({
                     margin: 22px 0 15px 0;
                     font-size: 12px;
                     opacity: 0.7;
-                    @media (max-width: 420px) {
+                    @media (max-width: 300px) {
                       margin: 10px 0 10px 0;
                     }
                   `
@@ -117,7 +117,7 @@ const AttachmentMetadata = ({
                     opacity: 0.7;
                     margin-left: 3px;
                     margin-top: 2px;
-                    @media (max-width: 420px) {
+                    @media (max-width: 300px) {
                       margin-left: 0;
                       margin-top: 2px;
                     }
@@ -128,7 +128,7 @@ const AttachmentMetadata = ({
                   opacity: 0.7;
                   margin-left: 3px;
                   margin-top: 7px;
-                  @media (max-width: 420px) {
+                  @media (max-width: 300px) {
                     margin-left: 0;
                     margin-top: 5px;
                   }
@@ -146,7 +146,7 @@ const AttachmentMetadata = ({
             display: flex;
             flex-direction: row;
             align-items: center;
-            @media (max-width: 420px) {
+            @media (max-width: 300px) {
               flex-direction: row;
               align-items: flex-start;
             }
@@ -156,7 +156,7 @@ const AttachmentMetadata = ({
             css={css`
               margin-left: 10px;
               margin-top: ${attachment.description ? '3px' : '10px'};
-              @media (max-width: 420px) {
+              @media (max-width: 300px) {
                 margin-left: 0;
                 margin-top: 5px;
               }
@@ -177,7 +177,7 @@ const AttachmentMetadata = ({
             css={css`
               margin-left: 10px;
               margin-top: 5px;
-              @media (max-width: 420px) {
+              @media (max-width: 300px) {
                 margin-left: 0;
                 margin-top: 5px;
               }
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index e787d10b14..6084b63d34 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -94,7 +94,7 @@ const VideoAttachment = ({
         <Box
           css={css`
             @media (max-width: 450px) {
-              margin-top: 0.5rem;
+              margin-top: 0.3rem;
             }
           `}
         >

From af805c99b84164f4ef190bd2c862c68d3659d2fc Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 4 Feb 2025 01:53:51 +0530
Subject: [PATCH 7/9] also fix imageAttachment

---
 .../AttachmentHandler/AttachmentMetadata.js   | 115 ++++++++++--------
 .../AttachmentHandler/ImageAttachment.js      |  25 ++--
 .../AttachmentHandler/VideoAttachment.js      |   2 +-
 3 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 7a2a4da6b3..c11382d6e2 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -35,7 +35,7 @@ const AttachmentMetadata = ({
         css`
           display: flex;
           flex-direction: column;
-          @media (max-width: 300px) {
+          @media (max-width: 420px) {
             flex-direction: column;
             align-items: flex-start;
           }
@@ -49,14 +49,14 @@ const AttachmentMetadata = ({
             ? [
                 css`
                   margin: 10px 0px;
-                  @media (max-width: 300px) {
+                  @media (max-width: 420px) {
                     margin: 5px 0px;
                   }
                 `,
               ]
             : css`
                 margin: -7px 0px;
-                @media (max-width: 300px) {
+                @media (max-width: 420px) {
                   margin: -5px 0px;
                 }
               `
@@ -73,80 +73,91 @@ const AttachmentMetadata = ({
           display: flex;
           flex-direction: row;
           align-items: center;
-          @media (max-width: 300px) {
+          @media (max-width: 420px) {
             flex-direction: column;
             align-items: flex-start;
           }
         `}
       >
-        <Tooltip text={attachment.title} position="down">
-          <p
+        <Box
+          css={css`
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            @media (max-width: 420px) {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+          `}
+        >
+          <Tooltip text={attachment.title} position="down">
+            <p
+              css={
+                attachment.description
+                  ? [
+                      css`
+                        margin: 3px 0 0 0;
+                        font-size: 12px;
+                        opacity: 0.7;
+                        @media (max-width: 420px) {
+                          margin: 8px 0 0 0;
+                        }
+                      `,
+                    ]
+                  : css`
+                      margin: 22px 0 15px 0;
+                      font-size: 12px;
+                      opacity: 0.7;
+                      @media (max-width: 420px) {
+                        margin: 10px 0 10px 0;
+                      }
+                    `
+              }
+            >
+              {attachment.title.length > 24
+                ? `${attachment.title.substring(0, 24)}...`
+                : attachment.title}
+            </p>
+          </Tooltip>
+          <Box
             css={
               attachment.description
                 ? [
                     css`
-                      margin: 3px 0 0 0;
                       font-size: 12px;
                       opacity: 0.7;
-                      @media (max-width: 300px) {
-                        margin: 2px 0 0 0;
+                      margin-left: 3px;
+                      margin-top: 2px;
+                      @media (max-width: 420px) {
+                        display: none;
                       }
                     `,
                   ]
                 : css`
-                    margin: 22px 0 15px 0;
                     font-size: 12px;
                     opacity: 0.7;
-                    @media (max-width: 300px) {
-                      margin: 10px 0 10px 0;
+                    margin-left: 3px;
+                    margin-top: 7px;
+                    @media (max-width: 420px) {
+                      margin-left: 0;
+                      margin-top: 5px;
                     }
                   `
             }
           >
-            {attachment.title.length > 24
-              ? `${attachment.title.substring(0, 24)}...`
-              : attachment.title}
-          </p>
-        </Tooltip>
-        <Box
-          css={
-            attachment.description
-              ? [
-                  css`
-                    font-size: 12px;
-                    opacity: 0.7;
-                    margin-left: 3px;
-                    margin-top: 2px;
-                    @media (max-width: 300px) {
-                      margin-left: 0;
-                      margin-top: 2px;
-                    }
-                  `,
-                ]
-              : css`
-                  font-size: 12px;
-                  opacity: 0.7;
-                  margin-left: 3px;
-                  margin-top: 7px;
-                  @media (max-width: 300px) {
-                    margin-left: 0;
-                    margin-top: 5px;
-                  }
-                `
-          }
-        >
-          (
-          {attachment.image_size
-            ? (attachment.image_size / 1024).toFixed(2)
-            : 0}{' '}
-          kB)
+            (
+            {attachment.image_size
+              ? (attachment.image_size / 1024).toFixed(2)
+              : 0}{' '}
+            kB)
+          </Box>
         </Box>
         <Box
           css={css`
             display: flex;
             flex-direction: row;
             align-items: center;
-            @media (max-width: 300px) {
+            @media (max-width: 420px) {
               flex-direction: row;
               align-items: flex-start;
             }
@@ -156,7 +167,7 @@ const AttachmentMetadata = ({
             css={css`
               margin-left: 10px;
               margin-top: ${attachment.description ? '3px' : '10px'};
-              @media (max-width: 300px) {
+              @media (max-width: 420px) {
                 margin-left: 0;
                 margin-top: 5px;
               }
@@ -177,7 +188,7 @@ const AttachmentMetadata = ({
             css={css`
               margin-left: 10px;
               margin-top: 5px;
-              @media (max-width: 300px) {
+              @media (max-width: 420px) {
                 margin-left: 0;
                 margin-top: 5px;
               }
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 5f95829df0..9f36c18ab0 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -76,14 +76,23 @@ const ImageAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_link || attachment.image_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            align-items: center;
+            @media (max-width: 420px) {
+              margin-top: 0.4rem;
+            }
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_link || attachment.image_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <Box onClick={() => setShowGallery(true)}>
             <img
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 6084b63d34..7bad3a90c6 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -94,7 +94,7 @@ const VideoAttachment = ({
         <Box
           css={css`
             @media (max-width: 450px) {
-              margin-top: 0.3rem;
+              margin-top: 0.4rem;
             }
           `}
         >

From 5be3bc260fd9928de2096d83edabfb2839e1c234 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 4 Feb 2025 02:00:19 +0530
Subject: [PATCH 8/9] audioAttachment

---
 .../AttachmentHandler/AudioAttachment.js      | 24 ++++++++++++-------
 .../AttachmentHandler/ImageAttachment.js      |  2 +-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 5caf16e760..867792b4f7 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -67,14 +67,22 @@ const AudioAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.audio_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            @media (max-width: 450px) {
+              margin-top: 0.4rem;
+            }
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_url || attachment.audio_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <audio
             src={host + attachment.audio_url}
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 9f36c18ab0..84516ce65a 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -79,7 +79,7 @@ const ImageAttachment = ({
         <Box
           css={css`
             align-items: center;
-            @media (max-width: 420px) {
+            @media (max-width: 450px) {
               margin-top: 0.4rem;
             }
           `}

From ad98e19a97ea7d68fa475d2d0038be2a554e4e09 Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Fri, 7 Feb 2025 11:43:17 +0530
Subject: [PATCH 9/9] fix

---
 .../react/src/views/AttachmentHandler/AttachmentMetadata.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index c11382d6e2..17e25c03db 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -114,8 +114,8 @@ const AttachmentMetadata = ({
                     `
               }
             >
-              {attachment.title.length > 24
-                ? `${attachment.title.substring(0, 24)}...`
+              {attachment.title.length > 22
+                ? `${attachment.title.substring(0, 22)}...`
                 : attachment.title}
             </p>
           </Tooltip>