From 30ee6839d45db4db753197599b17f07cbd650857 Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Tue, 24 Dec 2024 17:26:46 +0530
Subject: [PATCH 1/3] BUG: Fix extra top space for audio and video messages to
 improve UI consistency

---
 .../AttachmentHandler/AttachmentMetadata.js   | 51 +++++-----------
 .../AttachmentHandler/AudioAttachment.js      | 61 +++++++++++++------
 .../AttachmentHandler/VideoAttachment.js      | 51 ++++++++++------
 3 files changed, 92 insertions(+), 71 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
index 390cab7b71..0ac573149d 100644
--- a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
+++ b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { ActionButton, Box } from '@embeddedchat/ui-elements';
-import { Markdown } from '../Markdown';
 
 const AttachmentMetadata = ({
   attachment,
@@ -40,48 +39,28 @@ const AttachmentMetadata = ({
         variantStyles.attachmentMetaContainer,
       ]}
     >
-      <div
-        css={
-          attachment.description !== ''
-            ? [
-                css`
-                  margin: 10px 0px;
-                `,
-              ]
-            : css`
-                margin: -7px 0px;
-              `
-        }
+      <p
+        css={[
+          css`
+            margin-top: ${attachment.description ? '0.5rem' : '-3px'};
+          `,
+        ]}
       >
-        {msg ? (
-          <Markdown body={msg} md={attachment.descriptionMd} />
-        ) : (
-          attachment.description
-        )}
-      </div>
+        {attachment.description}
+      </p>
       <Box
         css={css`
           display: flex;
           flex-direction: row;
           align-items: center;
+          margin-top: ${attachment.description ? '0.5rem' : '0px'};
         `}
       >
         <p
-          css={
-            attachment.description
-              ? [
-                  css`
-                    margin: 0px;
-                    font-size: 14px;
-                    opacity: 0.7;
-                  `,
-                ]
-              : css`
-                  margin: 22px 0 15px 0;
-                  font-size: 14px;
-                  opacity: 0.7;
-                `
-          }
+          css={css`
+            font-size: 14px;
+            opacity: 0.7;
+          `}
         >
           {attachment.title}
         </p>
@@ -92,7 +71,7 @@ const AttachmentMetadata = ({
           onClick={onExpandCollapseClick}
           css={css`
             margin-left: 10px;
-            margin-top: ${attachment.description ? '3px' : '13px'};
+            margin-top: 1px;
           `}
         />
         <ActionButton
@@ -102,7 +81,7 @@ const AttachmentMetadata = ({
           onClick={handleDownload}
           css={css`
             margin-left: 10px;
-            margin-top: 5px;
+            margin-top: 3px;
           `}
         />
       </Box>
diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 8e3ce527a4..7eb3bb3dd9 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -34,7 +34,6 @@ const AudioAttachment = ({
           css`
             line-height: 0;
             border-radius: inherit;
-            padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
             css`
@@ -52,6 +51,7 @@ const AudioAttachment = ({
                   display: flex;
                   gap: 0.3rem;
                   align-items: center;
+                  padding: 0.5rem;
                 `,
                 variantStyles.textUserInfo,
               ]}
@@ -67,16 +67,30 @@ const AudioAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.audio_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            padding-left: 0.5rem;
+          `}
+        >
+          <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} width="100%" controls />
+          <audio
+            src={host + attachment.audio_url}
+            width="100%"
+            controls
+            style={{
+              paddingLeft: '0.5rem',
+              paddingBottom: '0.5rem',
+            }}
+          />
         )}
 
         {attachment.attachments &&
@@ -107,6 +121,7 @@ const AudioAttachment = ({
                           display: flex;
                           gap: 0.3rem;
                           align-items: center;
+                          padding: 0.5rem;
                         `,
                         variantStyles.textUserInfo,
                       ]}
@@ -122,18 +137,28 @@ const AudioAttachment = ({
                 ) : (
                   ''
                 )}
-                <AttachmentMetadata
-                  attachment={nestedAttachment}
-                  url={
-                    host +
-                    (nestedAttachment.title_url || nestedAttachment.audio_url)
-                  }
-                  variantStyles={variantStyles}
-                />
+                <Box
+                  css={css`
+                    padding-left: 0.5rem;
+                  `}
+                >
+                  <AttachmentMetadata
+                    attachment={nestedAttachment}
+                    url={
+                      host +
+                      (nestedAttachment.title_url || nestedAttachment.audio_url)
+                    }
+                    variantStyles={variantStyles}
+                  />
+                </Box>
                 <audio
                   src={host + nestedAttachment.audio_url}
                   width="100%"
                   controls
+                  style={{
+                    paddingLeft: '0.5rem',
+                    paddingBottom: '0.5rem',
+                  }}
                 />
               </Box>
             </Box>
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 4407481ee4..76924571f3 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -44,7 +44,6 @@ const VideoAttachment = ({
           css`
             line-height: 0;
             border-radius: inherit;
-            padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
             css`
@@ -62,6 +61,7 @@ const VideoAttachment = ({
                   display: flex;
                   gap: 0.3rem;
                   align-items: center;
+                  padding: 0.5rem;
                 `,
                 variantStyles.textUserInfo,
               ]}
@@ -77,14 +77,20 @@ const VideoAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.video_url)}
-          variantStyles={variantStyles}
-          msg={msg}
-          onExpandCollapseClick={toggleExpanded}
-          isExpanded={isExpanded}
-        />
+        <Box
+          css={css`
+            padding-left: 0.5rem;
+          `}
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_url || attachment.video_url)}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        </Box>
         {isExpanded && (
           <video
             width={300}
@@ -92,6 +98,8 @@ const VideoAttachment = ({
             style={{
               borderBottomLeftRadius: 'inherit',
               borderBottomRightRadius: 'inherit',
+              paddingLeft: '0.5rem',
+              paddingBottom: '0.5rem',
             }}
           >
             <source
@@ -128,6 +136,7 @@ const VideoAttachment = ({
                           display: flex;
                           gap: 0.3rem;
                           align-items: center;
+                          padding: 0.5rem;
                         `,
                         variantStyles.textUserInfo,
                       ]}
@@ -143,20 +152,28 @@ const VideoAttachment = ({
                 ) : (
                   ''
                 )}
-                <AttachmentMetadata
-                  attachment={nestedAttachment}
-                  url={
-                    host +
-                    (nestedAttachment.title_url || nestedAttachment.video_url)
-                  }
-                  variantStyles={variantStyles}
-                />
+                <Box
+                  css={css`
+                    padding-left: 0.5rem;
+                  `}
+                >
+                  <AttachmentMetadata
+                    attachment={nestedAttachment}
+                    url={
+                      host +
+                      (nestedAttachment.title_url || nestedAttachment.video_url)
+                    }
+                    variantStyles={variantStyles}
+                  />
+                </Box>
                 <video
                   width={300}
                   controls
                   style={{
                     borderBottomLeftRadius: 'inherit',
                     borderBottomRightRadius: 'inherit',
+                    paddingLeft: '0.5rem',
+                    paddingBottom: '0.5rem',
                   }}
                 >
                   <source

From b10819ae2e49928138a90bc3af094b0eb9108338 Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Wed, 25 Dec 2024 21:30:37 +0530
Subject: [PATCH 2/3] Fix: Add padding for audio and video messages in nested
 attachments and quotes

---
 .../AttachmentHandler/AudioAttachment.js      | 31 ++++---------------
 .../AttachmentHandler/VideoAttachment.js      | 19 ++++++++++++
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 7eb3bb3dd9..a384c05f5e 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -67,31 +67,12 @@ const AudioAttachment = ({
         ) : (
           ''
         )}
-        <Box
-          css={css`
-            padding-left: 0.5rem;
-          `}
-        >
-          <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}
-            width="100%"
-            controls
-            style={{
-              paddingLeft: '0.5rem',
-              paddingBottom: '0.5rem',
-            }}
-          />
-        )}
+        <AttachmentMetadata
+          attachment={attachment}
+          url={host + (attachment.title_url || attachment.audio_url)}
+          variantStyles={variantStyles}
+        />
+        <audio src={host + attachment.audio_url} width="100%" controls />
 
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 76924571f3..782d09b66c 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -81,6 +81,25 @@ const VideoAttachment = ({
           css={css`
             padding-left: 0.5rem;
           `}
+<<<<<<< HEAD
+=======
+        >
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + (attachment.title_url || attachment.video_url)}
+            variantStyles={variantStyles}
+          />
+        </Box>
+        <video
+          width={300}
+          controls
+          style={{
+            borderBottomLeftRadius: 'inherit',
+            borderBottomRightRadius: 'inherit',
+            paddingLeft: '0.5rem',
+            paddingBottom: '0.5rem',
+          }}
+>>>>>>> 306ae5b6 (Fix: Add padding for audio and video messages in nested attachments and quotes)
         >
           <AttachmentMetadata
             attachment={attachment}

From 352d66d7c1a612d4fa37d0849fa2852945a082a6 Mon Sep 17 00:00:00 2001
From: dhairyashil <dhairyashil10101010@gmail.com>
Date: Sun, 5 Jan 2025 20:53:27 +0530
Subject: [PATCH 3/3] Fixed merge conflicts

---
 .../AttachmentHandler/AudioAttachment.js      | 31 +++++++++++++++----
 .../AttachmentHandler/VideoAttachment.js      | 19 ------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index a384c05f5e..7eb3bb3dd9 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -67,12 +67,31 @@ const AudioAttachment = ({
         ) : (
           ''
         )}
-        <AttachmentMetadata
-          attachment={attachment}
-          url={host + (attachment.title_url || attachment.audio_url)}
-          variantStyles={variantStyles}
-        />
-        <audio src={host + attachment.audio_url} width="100%" controls />
+        <Box
+          css={css`
+            padding-left: 0.5rem;
+          `}
+        >
+          <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}
+            width="100%"
+            controls
+            style={{
+              paddingLeft: '0.5rem',
+              paddingBottom: '0.5rem',
+            }}
+          />
+        )}
 
         {attachment.attachments &&
           attachment.attachments.map((nestedAttachment, index) => (
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 782d09b66c..76924571f3 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -81,25 +81,6 @@ const VideoAttachment = ({
           css={css`
             padding-left: 0.5rem;
           `}
-<<<<<<< HEAD
-=======
-        >
-          <AttachmentMetadata
-            attachment={attachment}
-            url={host + (attachment.title_url || attachment.video_url)}
-            variantStyles={variantStyles}
-          />
-        </Box>
-        <video
-          width={300}
-          controls
-          style={{
-            borderBottomLeftRadius: 'inherit',
-            borderBottomRightRadius: 'inherit',
-            paddingLeft: '0.5rem',
-            paddingBottom: '0.5rem',
-          }}
->>>>>>> 306ae5b6 (Fix: Add padding for audio and video messages in nested attachments and quotes)
         >
           <AttachmentMetadata
             attachment={attachment}