Message: Fix paddings (#3538)

src/components/common/Audio.scss

@@ -3,6 +3,18 @@
   align-items: flex-start;
   position: relative;
 
+  &.inline {
+    margin-top: calc(0.5rem - 0.3125rem);
+
+    .message-content.no-text & {
+      margin-bottom: calc(0.8125rem - 0.375rem);
+
+      &[dir=rtl] {
+        margin-bottom: 1.5rem;
+      }
+    }
+  }
+
   .media-loading {
     position: absolute;
     pointer-events: none;
@@ -406,10 +418,3 @@
     }
   }
 }
-
-.has-replies .Audio {
-  margin-bottom: 1rem;
-  [dir="rtl"] {
-    margin-bottom: 1.625rem;
-  }
-}

src/components/common/Audio.tsx

@@ -291,6 +291,7 @@ const Audio: FC<OwnProps> = ({
   const fullClassName = buildClassName(
     'Audio',
     className,
+    origin === AudioOrigin.Inline && 'inline',
     isOwn && origin === AudioOrigin.Inline && 'own',
     (origin === AudioOrigin.Search || origin === AudioOrigin.SharedMedia) && 'bigger',
     isSelected && 'audio-is-selected',

src/components/middle/message/CommentButton.scss

@@ -132,10 +132,6 @@
     margin-bottom: -0.5rem;
   }
 
-  .message-content.audio & {
-    margin-bottom: -0.8125rem;
-  }
-
   .message-content.document &,
   .message-content.audio &,
   .message-content.voice &,

src/components/middle/message/_message-content.scss

@@ -417,16 +417,24 @@
   }
 
   &.document {
-    padding: 0.5rem !important;
-
     .File {
+      margin-top: calc(0.5rem - 0.3125rem);
+
+      .message-content.no-text & {
+        margin-bottom: calc(0.5rem - 0.375rem);
+      }
+
       .theme-dark & {
         --color-primary: var(--color-selection-highlight);
       }
     }
+  }
 
-    .File + .text-content {
+  &.voice,
-      margin-top: 0.3125rem;
+  &.audio,
+  &.document {
+    .text-content {
+      margin-top: 0.25rem;
     }
   }
 
@@ -439,31 +447,12 @@
     }
   }
 
-  &.voice {
-    padding: 0.5rem !important;
-
-    .Voice + .text-content {
-      margin-top: 0.5rem;
-    }
-  }
-
   &.audio {
     min-width: 20rem;
-    padding: 0.5rem 0.5rem 0.8125rem !important;
 
     @media (max-width: 600px) {
       min-width: 17rem;
     }
-
-    .Audio + .text-content {
-      margin-top: 0.25rem;
-    }
-
-    &:not(.has-replies) {
-      .Audio + .text-content {
-        margin-bottom: -0.4375rem;
-      }
-    }
   }
 
   &:not(.custom-shape) .emoji:not(.custom-emoji) {

src/components/middle/message/helpers/buildContentClassName.ts

@@ -48,6 +48,8 @@ export function buildContentClassName(
     }
   } else if (hasText) {
     classNames.push('text');
+  } else {
+    classNames.push('no-text');
   }
 
   if (hasActionButton) {