Fix clock line break in voice message player on monospace font #8815
Conversation
github-actions
bot
added
Z-Community-PR
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
There was a problem hiding this comment.
The changes overall are almost certainly sane, however this bit of the app is heavily designed and needs to meet those designs.
Ideally we'd have screenshot tests to prove that nothing has changed here, as there appears to be quite a lot which has changed by accident.
| position: relative; | ||
| display: inline-block; | ||
| display: flex; |
There was a problem hiding this comment.
Nested flexboxes end up going poorly on Safari/Firefox, and I don't think we need it here.
| // 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; |
There was a problem hiding this comment.
I feel like we should be using a class rather than a mixin.
| } | ||
|
|
||
| .mx_Clock { | ||
| min-width: $font-42px; // for flexbox |
| } | ||
|
|
||
| // For audio player and voice message player | ||
| .mx_SeekBar, |
There was a problem hiding this comment.
should this be tightly scoped?
| @@ -69,7 +59,6 @@ limitations under the License. | |||
| position: absolute; | |||
| left: 0; | |||
| height: 30px; | |||
| top: -2px; // visually vertically centered | |||
There was a problem hiding this comment.
this was moving the seek bar 2px up, which is still needed.
| // For timeline-rendered playback, the clock is on the other side of the waveform. | ||
| & + .mx_Clock { | ||
| text-align: right; | ||
| .mx_MessageComposer_controls { |
There was a problem hiding this comment.
We shouldn't be targeting the composer here - we need to be targeting the PlaybackContainer classes itself.
|
|
||
| // For timeline-rendered playback, the clock is on the other side of the waveform. | ||
| & + .mx_Clock { | ||
| text-align: right; |
There was a problem hiding this comment.
This text-align was fixing a layout issue that is introduced by this PR where the clock ends up not matching the designs:
(this PR)
There should be no padding or margin on the right side of the clock.
|
The PR was initially created before the latest change was added to the player, and it looks like many of the changes of this PR got obsolete since then.
I am not sure if I follow; where are those designs? |
|
I don't think the designs are public, unfortunately :( We have very strict tolerances on the padding/margins for the voice message components though - I'm going to look into adding screenshot tests for this area. |
|
If the design is not publicly available, there is not really something I could do here.. Closing for now. |
Fixes element-hq/element-web#22541
This PR applies the same fix as #8320 to the clocks on voice message player on the timeline and the message composer.
Purple: padding
Yellow: margin
Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com
type: defect
Here's what your changelog entry will look like:
🐛 Bug Fixes