Set a max width on waveform-less tiles

Author: turt2live

res/css/views/audio_messages/_PlaybackContainer.scss

@@ -49,4 +49,8 @@ limitations under the License.
         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_VoiceMessagePrimaryContainer_noWaveform {
+        max-width: 162px; // with all the padding this results in 185px wide
+    }
 }

src/components/views/audio_messages/RecordingPlayback.tsx

@@ -64,7 +64,8 @@ export default class RecordingPlayback extends React.PureComponent<IProps, IStat
     };
 
     public render(): ReactNode {
-        return <div className='mx_MediaBody mx_VoiceMessagePrimaryContainer'>
+        const shapeClass = !this.isWaveformable ? 'mx_VoiceMessagePrimaryContainer_noWaveform' : '';
+        return <div className={'mx_MediaBody mx_VoiceMessagePrimaryContainer ' + shapeClass}>
             <PlayPauseButton playback={this.props.playback} playbackPhase={this.state.playbackPhase} />
             <PlaybackClock playback={this.props.playback} />
             { this.isWaveformable && <PlaybackWaveform playback={this.props.playback} /> }