From 87ac2d7cc5d91d7461b15d39bc6a5a63cc995b39 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 21 Jul 2021 14:47:02 -0600 Subject: [PATCH] Move padding and width to MediaBody styles --- res/css/views/audio_messages/_AudioPlayer.scss | 1 - res/css/views/audio_messages/_PlaybackContainer.scss | 6 +++--- res/css/views/messages/_MediaBody.scss | 4 +++- 3 files changed, 6 insertions(+), 5 deletions(-) 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; +}