Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Set a max width on waveform-less tiles
Browse files Browse the repository at this point in the history
  • Loading branch information
turt2live committed Jul 14, 2021
1 parent 5a75539 commit 1f131db
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 1 deletion.
4 changes: 4 additions & 0 deletions res/css/views/audio_messages/_PlaybackContainer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
3 changes: 2 additions & 1 deletion src/components/views/audio_messages/RecordingPlayback.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} /> }
Expand Down

0 comments on commit 1f131db

Please sign in to comment.