Fix clock line break in voice message player on monospace font

res/css/_common.scss

@@ -806,3 +806,25 @@ legend {
     mask-repeat: no-repeat;
     mask-size: contain;
 }
+
+@define-mixin AudioPlayer {
+    .mx_PlayPauseButton {
+        margin-inline-end: $spacing-8;
+    }
+
+    // For audio player and voice message player
+    .mx_SeekBar,
+    .mx_RecordingPlayback_timelineLayoutMiddle {
+        flex: 1;
+
+        + .mx_Clock {
+            margin-inline-start: $spacing-8;
+        }
+    }
+
+    .mx_Clock {
+        min-width: $font-42px; // for flexbox
+        text-align: justify;
+        white-space: nowrap;
+    }
+}

res/css/views/audio_messages/_AudioPlayer.scss

@@ -15,15 +15,13 @@ limitations under the License.
 */
 
 .mx_MediaBody.mx_AudioPlayer_container {
-    padding: 16px 12px 12px 12px;
+    @mixin AudioPlayer;
+
+    padding-top: $spacing-16;
 
     .mx_AudioPlayer_primaryContainer {
         display: flex;
 
-        .mx_PlayPauseButton {
-            margin-right: 8px;
-        }
-
         .mx_AudioPlayer_mediaInfo {
             flex: 1;
             overflow: hidden; // makes the ellipsis on the file name work
@@ -39,7 +37,7 @@ limitations under the License.
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
-                padding-bottom: 4px; // mimics the line-height differences in the Figma
+                padding-bottom: $spacing-4; // mimics the line-height differences in the Figma
             }
 
             .mx_AudioPlayer_byline {
@@ -52,16 +50,5 @@ limitations under the License.
     .mx_AudioPlayer_seek {
         display: flex;
         align-items: center;
-
-        .mx_SeekBar {
-            flex: 1;
-        }
-
-        .mx_Clock {
-            min-width: $font-42px; // for flexbox
-            padding-left: $spacing-4; // isolate from seek bar
-            text-align: justify;
-            white-space: nowrap;
-        }
     }
 }

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -19,18 +19,17 @@ limitations under the License.
 
 // Container for live recording and playback controls
 .mx_MediaBody.mx_VoiceMessagePrimaryContainer {
-    // The waveform (right) has a 1px padding on it that we want to account for, otherwise
-    // inherit from mx_MediaBody
-    padding-right: 11px;
+    @mixin AudioPlayer;
 
     // Cheat at alignment a bit
     display: flex;
     align-items: center;
 
     contain: content;
 
-    // Waveforms are present in live recording only
     .mx_Waveform {
+        flex: 1; // Keep space for waveforms
+
         .mx_Waveform_bar {
             background-color: $quaternary-content;
             height: 100%;
@@ -45,18 +44,9 @@ limitations under the License.
         }
     }
 
-    .mx_Clock {
-        width: $font-42px; // we're not using a monospace font, so fake it
-        min-width: $font-42px; // force sensible layouts in awkward flexboxes (file panel, for example)
-        padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
-        padding-left: 8px; // isolate from recording circle / play control
-    }
-
     .mx_RecordingPlayback_timelineLayoutMiddle {
-        margin-left: 8px;
-        margin-right: 6px;
         position: relative;
-        display: inline-block;
+        display: flex;
         flex: 1;
         height: 30px; // same height as mx_Waveform, needed for automatic vertical centering
 
@@ -69,7 +59,6 @@ limitations under the License.
             position: absolute;
             left: 0;
             height: 30px;
-            top: -2px; // visually vertically centered
 
             // Hide the hairline progress bar since we're at 100% height. Need to have distinct rules
             // because CSS is weird.
@@ -96,13 +85,17 @@ limitations under the License.
                 background-color: transparent;
             }
         }
+    }
+}
 
-        // For timeline-rendered playback, the clock is on the other side of the waveform.
-        & + .mx_Clock {
-            text-align: right;
+.mx_MessageComposer_controls {
+    .mx_Waveform {
+        margin-inline-start: $spacing-8;
+    }
 
-            // Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle`
-            padding: 0;
-        }
+    .mx_VoiceMessagePrimaryContainer {
+        // The waveform (right) has a 1px padding on it that we want to account for, otherwise
+        // inherit from mx_MediaBody
+        padding-right: 11px;
     }
 }