Audio Player: Prevent overflow on medium screens, move buttons (#1907)

src/components/common/Audio.scss

@@ -177,6 +177,10 @@
     unicode-bidi: plaintext;
   }
 
+  .date {
+    flex-shrink: 0;
+  }
+
   .duration {
     font-size: 0.875rem;
     color: var(--color-text-secondary);
@@ -201,7 +205,7 @@
     }
 
     .performer {
-      flex-shrink: 0;
+      flex-shrink: 1;
     }
 
     .duration.with-seekline {
@@ -304,10 +308,6 @@
       line-height: 1.0625rem;
     }
 
-    .duration {
-      line-height: 1rem;
-    }
-
     .media-loading {
       top: 0.1875rem;
       left: 0.1875rem;

src/components/middle/AudioPlayer.scss

@@ -128,6 +128,7 @@
     justify-content: center;
     flex-direction: column;
     flex-shrink: 1;
+    max-width: 14rem;
     padding: 0 0.5rem;
     position: relative;
     overflow: hidden;
@@ -138,12 +139,24 @@
       background-color: var(--color-interactive-element-hover);
     }
 
-    @media (min-width: 1440px) and (max-width: 1500px) {
+    .right-column-shown & {
-      max-width: 14rem;
+      max-width: 10rem;
+    }
+
+    @media (max-width: 600px) {
+      max-width: 100%;
+    }
+
+    @media (min-width: 1440px) {
+      max-width: 24rem;
+      .right-column-shown & {
+        max-width: 14rem;
+      }
     }
 
     .AudioPlayer & .title {
       display: block;
+      margin-top: 0.125rem;
       font-weight: 500;
       font-size: 0.875rem !important;
       line-height: 1rem;

src/components/middle/AudioPlayer.tsx

@@ -161,6 +161,11 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
 
   return (
     <div className={buildClassName('AudioPlayer', className)} dir={lang.isRtl ? 'rtl' : undefined}>
+      <div className="AudioPlayer-content" onClick={handleClick}>
+        {audio ? renderAudio(audio) : renderVoice(lang('AttachAudio'), senderName)}
+        <RippleEffect />
+      </div>
+
       <Button
         round
         ripple={!IS_SINGLE_COLUMN_LAYOUT}
@@ -198,11 +203,6 @@ const AudioPlayer: FC<OwnProps & StateProps> = ({
         <i className="icon-skip-next" />
       </Button>
 
-      <div className="AudioPlayer-content" onClick={handleClick}>
-        {audio ? renderAudio(audio) : renderVoice(lang('AttachAudio'), senderName)}
-        <RippleEffect />
-      </div>
-
       <Button
         round
         className="player-button volume-button"