chore: fix message attachment combinations (voice recording widget) (#3069)

before/after
<img width="361" height="185" alt="Screenshot 2026-03-26 at 3 05 50 PM"
src="https://github.com/user-attachments/assets/3a5da8f0-5fc6-47ee-815c-aafba4e71c63"
/>
<img width="361" height="185" alt="Screenshot 2026-03-26 at 3 05 38 PM"
src="https://github.com/user-attachments/assets/91c142c5-4f8a-4cee-b475-fbb987c06acb"
/>

Author: arnautov-anton

src/components/Attachment/VoiceRecording.tsx

@@ -43,7 +43,9 @@ const VoiceRecordingPlayerUI = ({ audioPlayer }: VoiceRecordingPlayerUIProps) =>
 
   return (
     <div className={rootClassName} data-testid='voice-recording-widget'>
-      <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />
+      <div className='str-chat__message-attachment__voice-recording-widget__play-button-container'>
+        <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />
+      </div>
       <div className='str-chat__message-attachment__voice-recording-widget__metadata'>
         <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>
           <div className='str-chat__message-attachment__voice-recording-widget__timer'>

src/components/Attachment/styling/Attachment.scss

@@ -416,9 +416,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--spacing-xs);
+    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 {
       min-width: 180px;
       padding-inline: var(--spacing-xs);
@@ -478,14 +484,17 @@
 
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text {
   .str-chat__message-bubble {
-    padding: 0;
-    background-color: transparent;
     border: 1px solid var(--chat-border-incoming);
     box-shadow: var(--background-core-elevation-0);
   }
 
   .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/Message/styling/Message.scss

@@ -167,11 +167,6 @@
 }
 
 .str-chat__message.str-chat__message--has-single-attachment {
-  &.str-chat__message--has-no-text {
-    .str-chat__message-bubble {
-      padding: 0;
-    }
-  }
   &.str-chat__message--has-giphy-attachment {
     .str-chat__message-bubble {
       padding: 0;
@@ -183,16 +178,6 @@
   }
 }
 
-.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-giphy-attachment {
-  .str-chat__message-bubble {
-    padding: 0;
-  }
-
-  .str-chat__message-text {
-    display: none;
-  }
-}
-
 .str-chat__message-mention {
   color: var(--str-chat__message-mention-color);
   font: var(--str-chat__body2-medium-text);