From ce8a430a8caf13edec540d2c8eceb4b824ef4365 Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Thu, 22 Jan 2026 17:03:45 +0530
Subject: [PATCH 1/3] fix: align quote message sequence with Rocket.Chat

---
 packages/react/src/views/Message/Message.js   | 24 ++++++++---------
 .../src/views/QuoteMessage/QuoteMessage.js    | 27 +++++++++----------
 .../views/QuoteMessage/QuoteMessage.styles.js |  1 -
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index 355cde9b4a..e545ade21e 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -92,13 +92,13 @@ const Message = ({
   const hoverStyle = hasType
     ? {}
     : {
-        '&:hover': {
-          backgroundColor:
-            mode === 'light'
-              ? darken(theme.theme.colors.background, 0.03)
-              : lighten(theme.theme.colors.background, 1),
-        },
-      };
+      '&:hover': {
+        backgroundColor:
+          mode === 'light'
+            ? darken(theme.theme.colors.background, 0.03)
+            : lighten(theme.theme.colors.background, 1),
+      },
+    };
 
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
@@ -273,16 +273,16 @@ const Message = ({
               >
                 {message.attachments && message.attachments.length > 0 ? (
                   <>
-                    <Markdown
-                      body={message}
-                      md={message.md}
-                      isReaction={false}
-                    />
                     <Attachments
                       attachments={message.attachments}
                       variantStyles={variantStyles}
                       msg={message}
                     />
+                    <Markdown
+                      body={message}
+                      md={message.md}
+                      isReaction={false}
+                    />
                   </>
                 ) : (
                   <Markdown body={message} md={message.md} isReaction={false} />
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index 989c4887a8..2ac466f7db 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -59,6 +59,18 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         <Box>{format(new Date(message.ts), 'h:mm a')}</Box>
       </Box>
       <Box css={styles.message}>
+        {message.attachments &&
+          message.attachments.length > 0 &&
+          message.msg &&
+          message.msg[0] === '[' &&
+          message.attachments.map((attachment, index) => (
+            <Attachment
+              key={index}
+              attachment={attachment}
+              type={attachment.type}
+              host={instanceHost}
+            />
+          ))}
         {message.file ? (
           message.file.type.startsWith('image/') ? (
             <div>
@@ -101,8 +113,7 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
               {message.msg ? (
                 <Markdown body={message} md={message.md} isReaction={false} />
               ) : (
-                `${message.file?.name} (${
-                  message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
+                `${message.file?.name} (${message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
                 } kB)`
               )}
             </Box>
@@ -112,18 +123,6 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
         ) : (
           <Markdown body={message} md={message.md} isReaction={false} />
         )}
-        {message.attachments &&
-          message.attachments.length > 0 &&
-          message.msg &&
-          message.msg[0] === '[' &&
-          message.attachments.map((attachment, index) => (
-            <Attachment
-              key={index}
-              attachment={attachment}
-              type={attachment.type}
-              host={instanceHost}
-            />
-          ))}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
index 61c5c8d05f..e752b8989b 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
@@ -10,7 +10,6 @@ const getQuoteMessageStyles = (theme) => {
       color: ${theme.colors.foreground};
       padding: 0.5rem;
       z-index: 1200;
-      border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
       max-width: 100%;
       box-sizing: border-box;

From 31391069b1e39092c2c8cabe9876dfed5f460601 Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Thu, 22 Jan 2026 17:04:50 +0530
Subject: [PATCH 2/3] chore: adjust attachment rendering for quote UI

---
 .../AttachmentHandler/AudioAttachment.js      |  18 +-
 .../AttachmentHandler/ImageAttachment.js      |  18 +-
 .../views/AttachmentHandler/TextAttachment.js | 189 +++++++++---------
 .../AttachmentHandler/VideoAttachment.js      |  18 +-
 4 files changed, 125 insertions(+), 118 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 867792b4f7..5e35f4c45d 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -37,10 +37,11 @@ const AudioAttachment = ({
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-            css`
+          css`
               ${type === 'file'
-                ? `border: 3px solid ${theme.colors.border};`
-                : ''}
+              ? `border-inline-start: 2px solid ${theme.colors.border};
+                   background: ${theme.colors.primaryForeground};`
+              : ''}
             `,
         ]}
       >
@@ -61,7 +62,7 @@ const AudioAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box>{authorName}</Box>
             </Box>
           </>
         ) : (
@@ -104,10 +105,11 @@ const AudioAttachment = ({
                   (nestedAttachment.type
                     ? variantStyles.pinnedContainer
                     : variantStyles.quoteContainer) ||
-                    css`
+                  css`
                       ${nestedAttachment.type === 'file'
-                        ? `border: 3px solid ${theme.colors.border};`
-                        : ''}
+                      ? `border-inline-start: 2px solid ${theme.colors.border};
+                           background: ${theme.colors.primaryForeground};`
+                      : ''}
                     `,
                 ]}
               >
@@ -128,7 +130,7 @@ const AudioAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{nestedAttachment.author_name}</Box>
+                      <Box>{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 84516ce65a..30aaa96c90 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -46,10 +46,11 @@ const ImageAttachment = ({
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-            css`
+          css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
-                : ''}
+              ? `border-inline-start: 2px solid ${theme.colors.border};
+                 background: ${theme.colors.primaryForeground};`
+              : ''}
             `,
         ]}
       >
@@ -70,7 +71,7 @@ const ImageAttachment = ({
                 alt="avatar"
                 size="1.2em"
               />
-              <Box>@{authorName}</Box>
+              <Box>{authorName}</Box>
             </Box>
           </>
         ) : (
@@ -121,10 +122,11 @@ const ImageAttachment = ({
                   (nestedAttachment.attachments[0].type
                     ? variantStyles.pinnedContainer
                     : variantStyles.quoteContainer) ||
-                    css`
+                  css`
                       ${nestedAttachment.attachments[0].type === 'file'
-                        ? `border: 2px solid ${theme.colors.border};`
-                        : ''}
+                      ? `border-inline-start: 2px solid ${theme.colors.border};
+                         background: ${theme.colors.primaryForeground};`
+                      : ''}
                     `,
                 ]}
               >
@@ -145,7 +147,7 @@ const ImageAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{nestedAttachment.author_name}</Box>
+                      <Box>{nestedAttachment.author_name}</Box>
                     </Box>
                   </>
                 ) : (
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 73387c7413..4512229944 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -57,13 +57,14 @@ const FileAttachment = ({
             border-radius: 4px;
             line-height: 0;
             padding: 0.5rem;
-            background: ${theme.colors.background};
+            background: ${theme.colors.primaryForeground};
+            border-inline-start: 2px solid ${theme.colors.border};
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-            css`
+          css`
               ${type === 'file'
-                ? `border: 2px solid ${theme.colors.border};`
-                : ''}
+              ? `border-inline-start: 3px solid ${theme.colors.border};`
+              : ''}
             `,
         ]}
       >
@@ -83,89 +84,7 @@ const FileAttachment = ({
               alt="avatar"
               size="1.2em"
             />
-            <Box>@{attachment?.author_name}</Box>
-          </Box>
-        )}
-
-        {!attachment?.text && !attachment?.attachments && (
-          <AttachmentMetadata
-            attachment={attachment}
-            url={host + attachment.title_link}
-            variantStyles={variantStyles}
-            msg={msg}
-            onExpandCollapseClick={toggleExpanded}
-            isExpanded={isExpanded}
-          />
-        )}
-        {isExpanded && (attachment?.title_link || attachment?.text) && (
-          <Box
-            css={css`
-              margin-top: 0.5rem;
-              white-space: pre-line;
-              background: ${theme.colors.background};
-              padding: 8px 12px;
-              border-radius: 4px;
-              border: 1px solid ${theme.colors.border};
-              line-height: normal;
-            `}
-          >
-            {attachment?.text ? (
-              attachment.text[0] === '[' ? (
-                attachment.text.match(/\n(.*)/)?.[1] || ''
-              ) : (
-                <Markdown
-                  body={attachment.text}
-                  md={parse(attachment?.text)}
-                  isReaction={false}
-                />
-              )
-            ) : !attachment.attachments ? (
-              <Box
-                css={css`
-                  display: flex;
-                  align-items: center;
-                  margin-top: 0.5rem;
-                  background: ${theme.colors.background};
-                  padding: 8px 12px;
-                  border-radius: 4px;
-                  gap: 8px;
-                  border: 1px solid ${theme.colors.border};
-                `}
-              >
-                <Icon name="file" size="40px" />
-                <Box
-                  css={css`
-                    display: flex;
-                    flex-direction: column;
-                    gap: 2px;
-                    line-height: normal;
-                  `}
-                >
-                  <a
-                    href={host + attachment.title_link}
-                    download={attachment.title_link_download}
-                    css={css`
-                      text-decoration: none;
-                      font-size: 0.875rem;
-                      &:hover {
-                        text-decoration: underline;
-                      }
-                    `}
-                  >
-                    {attachment.title}
-                  </a>
-                  <Box
-                    css={css`
-                      font-size: 0.75rem;
-                    `}
-                  >
-                    {getFileSizeWithFormat(attachment.size, attachment.format)}
-                  </Box>
-                </Box>
-              </Box>
-            ) : (
-              ''
-            )}
+            <Box>{attachment?.author_name}</Box>
           </Box>
         )}
         {attachment?.attachments &&
@@ -180,19 +99,21 @@ const FileAttachment = ({
                   font-size: 0.875rem;
                   font-weight: 400;
                   word-break: break-word;
-                  border-inline-start: 3px solid ${theme.colors.border};
+                  background: ${theme.colors.primaryForeground};
+                  border-inline-start: 2px solid ${theme.colors.border};
                   margin-top: 0.75rem;
+                  margin-inline-start: 1rem;
                   padding: 0.5rem;
                 `,
                 (nestedAttachment?.type ? variantStyles.pinnedContainer : '') ||
-                  css`
+                css`
                     ${!attachment?.type
-                      ? `border: 2px solid ${theme.colors.border};`
-                      : ''}
+                    ? `border-inline-start: 2px solid ${theme.colors.border};`
+                    : ''}
                   `,
                 css`
                   ${variantStyles.name !== undefined &&
-                  variantStyles.name.includes('bubble')
+                    variantStyles.name.includes('bubble')
                     ? `border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem`
                     : ''}
                 `,
@@ -216,7 +137,7 @@ const FileAttachment = ({
                       alt="avatar"
                       size="1.2em"
                     />
-                    <Box>@{nestedAttachment?.author_name}</Box>
+                    <Box>{nestedAttachment?.author_name}</Box>
                   </>
                 )}
               </Box>
@@ -252,7 +173,7 @@ const FileAttachment = ({
                         display: flex;
                         align-items: center;
                         margin-top: 0.5rem;
-                        background: ${theme.colors.background};
+                        background: ${theme.colors.primaryForeground};
                         padding: 8px 12px;
                         border-radius: 4px;
                         gap: 8px;
@@ -298,6 +219,86 @@ const FileAttachment = ({
               )}
             </Box>
           ))}
+
+        {!attachment?.text && !attachment?.attachments && (
+          <AttachmentMetadata
+            attachment={attachment}
+            url={host + attachment.title_link}
+            variantStyles={variantStyles}
+            msg={msg}
+            onExpandCollapseClick={toggleExpanded}
+            isExpanded={isExpanded}
+          />
+        )}
+        {isExpanded && (attachment?.title_link || attachment?.text) && (
+          <Box
+            css={css`
+              margin-top: 0.5rem;
+              white-space: pre-line;
+              background: ${theme.colors.primaryForeground};
+              padding: 8px 12px;
+              line-height: normal;
+            `}
+          >
+            {attachment?.text ? (
+              attachment.text[0] === '[' ? (
+                attachment.text.match(/\n(.*)/)?.[1] || ''
+              ) : (
+                <Markdown
+                  body={attachment.text}
+                  md={parse(attachment?.text)}
+                  isReaction={false}
+                />
+              )
+            ) : !attachment.attachments ? (
+              <Box
+                css={css`
+                  display: flex;
+                  align-items: center;
+                  margin-top: 0.5rem;
+                  background: ${theme.colors.primaryForeground};
+                  padding: 8px 12px;
+                  border-radius: 4px;
+                  gap: 8px;
+                  border: 1px solid ${theme.colors.border};
+                `}
+              >
+                <Icon name="file" size="40px" />
+                <Box
+                  css={css`
+                    display: flex;
+                    flex-direction: column;
+                    gap: 2px;
+                    line-height: normal;
+                  `}
+                >
+                  <a
+                    href={host + attachment.title_link}
+                    download={attachment.title_link_download}
+                    css={css`
+                      text-decoration: none;
+                      font-size: 0.875rem;
+                      &:hover {
+                        text-decoration: underline;
+                      }
+                    `}
+                  >
+                    {attachment.title}
+                  </a>
+                  <Box
+                    css={css`
+                      font-size: 0.75rem;
+                    `}
+                  >
+                    {getFileSizeWithFormat(attachment.size, attachment.format)}
+                  </Box>
+                </Box>
+              </Box>
+            ) : (
+              ''
+            )}
+          </Box>
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index 7bad3a90c6..be488ff658 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -50,10 +50,11 @@ const VideoAttachment = ({
             }
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-            css`
+          css`
               ${type === 'file'
-                ? `border: 3px solid ${theme.colors.border};`
-                : ''}
+              ? `border-inline-start: 2px solid ${theme.colors.border};
+                 background: ${theme.colors.primaryForeground};`
+              : ''}
             `,
         ]}
       >
@@ -84,7 +85,7 @@ const VideoAttachment = ({
                   }
                 `}
               >
-                @{authorName}
+                {authorName}
               </Box>
             </Box>
           </>
@@ -139,10 +140,11 @@ const VideoAttachment = ({
                   (nestedAttachment.type
                     ? variantStyles.pinnedContainer
                     : variantStyles.quoteContainer) ||
-                    css`
+                  css`
                       ${type === 'file'
-                        ? `border: 3px solid ${theme.colors.border};`
-                        : ''}
+                      ? `border-inline-start: 2px solid ${theme.colors.border};
+                           background: ${theme.colors.primaryForeground};`
+                      : ''}
                     `,
                 ]}
               >
@@ -167,7 +169,7 @@ const VideoAttachment = ({
                         alt="avatar"
                         size="1.2em"
                       />
-                      <Box>@{authorName}</Box>
+                      <Box>{authorName}</Box>
                     </Box>
                   </>
                 ) : (

From b95cb62627b062182a067c9a1ef1db3ced4fe3ef Mon Sep 17 00:00:00 2001
From: khizarshah01 <khizar.shah010@gmail.com>
Date: Thu, 22 Jan 2026 17:27:31 +0530
Subject: [PATCH 3/3] chore: apply lint fixes

---
 .../src/views/AttachmentHandler/AudioAttachment.js | 12 ++++++------
 .../src/views/AttachmentHandler/ImageAttachment.js | 12 ++++++------
 .../src/views/AttachmentHandler/TextAttachment.js  | 14 +++++++-------
 .../src/views/AttachmentHandler/VideoAttachment.js | 12 ++++++------
 packages/react/src/views/Message/Message.js        | 14 +++++++-------
 .../react/src/views/QuoteMessage/QuoteMessage.js   |  3 ++-
 6 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
index 5e35f4c45d..8489b3d5e1 100644
--- a/packages/react/src/views/AttachmentHandler/AudioAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -37,11 +37,11 @@ const AudioAttachment = ({
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-          css`
+            css`
               ${type === 'file'
-              ? `border-inline-start: 2px solid ${theme.colors.border};
+                ? `border-inline-start: 2px solid ${theme.colors.border};
                    background: ${theme.colors.primaryForeground};`
-              : ''}
+                : ''}
             `,
         ]}
       >
@@ -105,11 +105,11 @@ const AudioAttachment = ({
                   (nestedAttachment.type
                     ? variantStyles.pinnedContainer
                     : variantStyles.quoteContainer) ||
-                  css`
+                    css`
                       ${nestedAttachment.type === 'file'
-                      ? `border-inline-start: 2px solid ${theme.colors.border};
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
                            background: ${theme.colors.primaryForeground};`
-                      : ''}
+                        : ''}
                     `,
                 ]}
               >
diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
index 30aaa96c90..231cdde536 100644
--- a/packages/react/src/views/AttachmentHandler/ImageAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -46,11 +46,11 @@ const ImageAttachment = ({
             padding: 0.5rem;
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-          css`
+            css`
               ${type === 'file'
-              ? `border-inline-start: 2px solid ${theme.colors.border};
+                ? `border-inline-start: 2px solid ${theme.colors.border};
                  background: ${theme.colors.primaryForeground};`
-              : ''}
+                : ''}
             `,
         ]}
       >
@@ -122,11 +122,11 @@ const ImageAttachment = ({
                   (nestedAttachment.attachments[0].type
                     ? variantStyles.pinnedContainer
                     : variantStyles.quoteContainer) ||
-                  css`
+                    css`
                       ${nestedAttachment.attachments[0].type === 'file'
-                      ? `border-inline-start: 2px solid ${theme.colors.border};
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
                          background: ${theme.colors.primaryForeground};`
-                      : ''}
+                        : ''}
                     `,
                 ]}
               >
diff --git a/packages/react/src/views/AttachmentHandler/TextAttachment.js b/packages/react/src/views/AttachmentHandler/TextAttachment.js
index 4512229944..af57ed90e3 100644
--- a/packages/react/src/views/AttachmentHandler/TextAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/TextAttachment.js
@@ -61,10 +61,10 @@ const FileAttachment = ({
             border-inline-start: 2px solid ${theme.colors.border};
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-          css`
+            css`
               ${type === 'file'
-              ? `border-inline-start: 3px solid ${theme.colors.border};`
-              : ''}
+                ? `border-inline-start: 3px solid ${theme.colors.border};`
+                : ''}
             `,
         ]}
       >
@@ -106,14 +106,14 @@ const FileAttachment = ({
                   padding: 0.5rem;
                 `,
                 (nestedAttachment?.type ? variantStyles.pinnedContainer : '') ||
-                css`
+                  css`
                     ${!attachment?.type
-                    ? `border-inline-start: 2px solid ${theme.colors.border};`
-                    : ''}
+                      ? `border-inline-start: 2px solid ${theme.colors.border};`
+                      : ''}
                   `,
                 css`
                   ${variantStyles.name !== undefined &&
-                    variantStyles.name.includes('bubble')
+                  variantStyles.name.includes('bubble')
                     ? `border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem`
                     : ''}
                 `,
diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
index be488ff658..c8493a32f9 100644
--- a/packages/react/src/views/AttachmentHandler/VideoAttachment.js
+++ b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -50,11 +50,11 @@ const VideoAttachment = ({
             }
           `,
           (type ? variantStyles.pinnedContainer : '') ||
-          css`
+            css`
               ${type === 'file'
-              ? `border-inline-start: 2px solid ${theme.colors.border};
+                ? `border-inline-start: 2px solid ${theme.colors.border};
                  background: ${theme.colors.primaryForeground};`
-              : ''}
+                : ''}
             `,
         ]}
       >
@@ -140,11 +140,11 @@ const VideoAttachment = ({
                   (nestedAttachment.type
                     ? variantStyles.pinnedContainer
                     : variantStyles.quoteContainer) ||
-                  css`
+                    css`
                       ${type === 'file'
-                      ? `border-inline-start: 2px solid ${theme.colors.border};
+                        ? `border-inline-start: 2px solid ${theme.colors.border};
                            background: ${theme.colors.primaryForeground};`
-                      : ''}
+                        : ''}
                     `,
                 ]}
               >
diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js
index e545ade21e..b1e5b5c71c 100644
--- a/packages/react/src/views/Message/Message.js
+++ b/packages/react/src/views/Message/Message.js
@@ -92,13 +92,13 @@ const Message = ({
   const hoverStyle = hasType
     ? {}
     : {
-      '&:hover': {
-        backgroundColor:
-          mode === 'light'
-            ? darken(theme.theme.colors.background, 0.03)
-            : lighten(theme.theme.colors.background, 1),
-      },
-    };
+        '&:hover': {
+          backgroundColor:
+            mode === 'light'
+              ? darken(theme.theme.colors.background, 0.03)
+              : lighten(theme.theme.colors.background, 1),
+        },
+      };
 
   const bubbleStyles = useBubbleStyles(isMe);
   const pinRoles = new Set(pinPermissions);
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.js b/packages/react/src/views/QuoteMessage/QuoteMessage.js
index 2ac466f7db..9bdb988c0b 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.js
@@ -113,7 +113,8 @@ const QuoteMessage = ({ className = '', style = {}, message }) => {
               {message.msg ? (
                 <Markdown body={message} md={message.md} isReaction={false} />
               ) : (
-                `${message.file?.name} (${message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
+                `${message.file?.name} (${
+                  message.file?.size ? (message.file.size / 1024).toFixed(2) : 0
                 } kB)`
               )}
             </Box>