fix: adjust padding for messages containing only padding

src/components/Attachment/styling/Attachment.scss

@@ -143,37 +143,6 @@
   /* Box shadow applied to file attachments */
   --str-chat__file-attachment-box-shadow: none;
 
-  /* Border radius applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-radius: calc(
-    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
-  );
-
-  /* Text color used in audio recording widget */
-  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
-
-  /* Border radius applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-secondary-color: var(
-    --str-chat__text-low-emphasis-color
-  );
-
-  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
-  --str-chat__voice-recording-attachment-widget-background-color: transparent;
-
-  /* Top border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-block-start: none;
-
-  /* Bottom border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-block-end: none;
-
-  /* Left (right in RTL layout) border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of audio recording widget */
-  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
-
-  /* Box shadow applied to audio recording widget */
-  --str-chat__voice-recording-attachment-widget-box-shadow: none;
-
   /* Border radius applied to the play / pause button of audio widget */
   --str-chat__audio-attachment-controls-button-border-radius: var(
     --str-chat__border-radius-circle
@@ -382,49 +351,6 @@
     @include utils.component-layer-overrides('file-attachment');
   }
 
-  .str-chat__message-attachment__voice-recording-widget {
-    @include utils.component-layer-overrides('voice-recording-attachment-widget');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-block: var(--spacing-xs);
-    padding-inline-start: var(--spacing-xs);
-    padding-inline-end: var(--spacing-sm);
-    min-height: 60px;
-
-    .str-chat__message-attachment__voice-recording-widget__play-button-container {
-      padding: var(--spacing-xxs);
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__metadata {
-      flex: 1;
-      min-width: 180px;
-      padding-inline: var(--spacing-xs);
-
-      a {
-        cursor: pointer;
-        text-decoration: none;
-        color: var(--str-chat__voice-recording-attachment-widget-color);
-      }
-
-      .str-chat__message-attachment-download-icon {
-        svg {
-          width: calc(var(--str-chat__spacing-px) * 24);
-          height: calc(var(--str-chat__spacing-px) * 16);
-        }
-      }
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__right-section {
-    }
-
-    .str-chat__message-attachment__voice-recording-widget__timer {
-      min-width: calc(var(--str-chat__spacing-px) * 40);
-      width: calc(var(--str-chat__spacing-px) * 40);
-      font: var(--str-chat__metadata-emphasis-text);
-    }
-  }
-
   .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
   }
 
@@ -433,6 +359,14 @@
   }
 }
 
+.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text:not(
+    .str-chat__message--has-quoted-message
+  ) {
+  .str-chat__message-bubble {
+    padding: 0;
+  }
+}
+
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text {
   .str-chat__message-bubble {
     border: 1px solid var(--chat-border-incoming);
@@ -441,11 +375,6 @@
 
   .str-chat__message-attachment {
     background-color: var(--chat-bg-incoming);
-
-    .str-chat__message-attachment__voice-recording-widget {
-      padding: unset;
-      padding-inline-end: var(--spacing-xxs);
-    }
   }
 }
 

src/components/Attachment/styling/Audio.scss

@@ -89,6 +89,7 @@
 
     .str-chat__message-attachment-file--item-size {
       line-height: calc(var(--str-chat__spacing-px) * 14);
+      font: var(--str-chat__font-metadata-default);
     }
   }
 }

src/components/Attachment/styling/VoiceRecording.scss

@@ -0,0 +1,74 @@
+@use '../../../styling/utils';
+
+.str-chat {
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* Text color used in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
+
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+
+  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-background-color: transparent;
+
+  /* Top border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-start: none;
+
+  /* Bottom border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-end: none;
+
+  /* Left (right in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
+
+  /* Box shadow applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-box-shadow: none;
+}
+
+.str-chat__message-attachment__voice-recording-widget {
+  @include utils.component-layer-overrides('voice-recording-attachment-widget');
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60px;
+  padding: var(--spacing-xs);
+
+  .str-chat__message-attachment__voice-recording-widget__play-button-container {
+    padding: var(--spacing-xxs);
+  }
+
+  .str-chat__message-attachment__voice-recording-widget__metadata {
+    flex: 1;
+    min-width: 180px;
+
+    a {
+      cursor: pointer;
+      text-decoration: none;
+      color: var(--str-chat__voice-recording-attachment-widget-color);
+    }
+
+    .str-chat__message-attachment-download-icon {
+      svg {
+        width: calc(var(--str-chat__spacing-px) * 24);
+        height: calc(var(--str-chat__spacing-px) * 16);
+      }
+    }
+  }
+
+  .str-chat__message-attachment__voice-recording-widget__right-section {
+  }
+
+  .str-chat__message-attachment__voice-recording-widget__timer {
+    min-width: calc(var(--str-chat__spacing-px) * 40);
+    width: calc(var(--str-chat__spacing-px) * 40);
+    font: var(--str-chat__metadata-emphasis-text);
+  }
+}

src/components/Attachment/styling/index.scss

@@ -7,3 +7,4 @@
 @use 'LinkPreview';
 @use 'ModalGallery';
 @use 'UnsupportedAttachment';
+@use 'VoiceRecording';

src/components/Message/MessageUI.tsx

@@ -24,6 +24,7 @@ import {
   isMessageErrorRetryable,
   messageHasAttachments,
   messageHasGiphyAttachment,
+  messageHasQuotedMessage,
   messageHasReactions,
   messageHasSingleAttachment,
   messageTextHasEmojisOnly,
@@ -125,6 +126,7 @@ const MessageUIWithContext = ({
   const hasSingleAttachment = !isDeleted && messageHasSingleAttachment(message);
   const hasGiphyAttachment = !isDeleted && messageHasGiphyAttachment(message);
   const hasReactions = !isDeleted && messageHasReactions(message);
+  const hasQuotedMessage = !isDeleted && messageHasQuotedMessage(message);
   const textHasEmojisOnly = !isDeleted && messageTextHasEmojisOnly(message);
 
   const allowRetry = isMessageErrorRetryable(message);
@@ -142,9 +144,9 @@ const MessageUIWithContext = ({
       'str-chat__message--has-attachment': hasAttachment,
       'str-chat__message--has-giphy-attachment': hasGiphyAttachment,
       'str-chat__message--has-no-text': !message.text,
-      'str-chat__message--has-text': !!message.text,
-      // eslint-disable-next-line sort-keys
+      'str-chat__message--has-quoted-message': hasQuotedMessage,
       'str-chat__message--has-single-attachment': hasSingleAttachment,
+      'str-chat__message--has-text': !!message.text,
       'str-chat__message--highlighted': highlighted,
       'str-chat__message--is-emoji-only': textHasEmojisOnly,
       [`str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`]:

src/components/Message/utils.tsx

@@ -277,6 +277,9 @@ export const areMessageUIPropsEqual = (
 export const messageHasReactions = (message?: LocalMessage) =>
   Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
 
+export const messageHasQuotedMessage = (message?: LocalMessage) =>
+  !!message?.quoted_message;
+
 export const messageHasAttachments = (message?: LocalMessage) =>
   !!message?.attachments && !!message.attachments.length;