diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.scss
index 9a65ad008f..2feab2e288 100644
--- a/res/css/views/audio_messages/_AudioPlayer.scss
+++ b/res/css/views/audio_messages/_AudioPlayer.scss
@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_AudioPlayer_container {
     padding: 16px 12px 12px 12px;
-    max-width: 267px; // use max to make the control fit in the files/pinned panels
 
     .mx_AudioPlayer_primaryContainer {
         display: flex;
diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss
index 5548f6198e..ef60bc4948 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@@ -19,9 +19,9 @@ limitations under the License.
 
 // Container for live recording and playback controls
 .mx_VoiceMessagePrimaryContainer {
-    // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
-    // has a 1px padding on it that we want to account for.
-    padding: 7px 12px 7px 11px;
+    // The waveform (right) has a 1px padding on it that we want to account for, otherwise
+    // inherit from mx_MediaBody
+    padding-right: 11px;
 
     // Cheat at alignment a bit
     display: flex;
diff --git a/res/css/views/messages/_MediaBody.scss b/res/css/views/messages/_MediaBody.scss
index 12e441750c..7f4bfd3fdc 100644
--- a/res/css/views/messages/_MediaBody.scss
+++ b/res/css/views/messages/_MediaBody.scss
@@ -20,9 +20,11 @@ limitations under the License.
 .mx_MediaBody {
     background-color: $message-body-panel-bg-color;
     border-radius: 12px;
+    max-width: 243px; // use max-width instead of width so it fits within right panels
 
     color: $message-body-panel-fg-color;
     font-size: $font-14px;
     line-height: $font-24px;
-}
 
+    padding: 6px 12px;
+}