Media Element CSS Issue : Some layout display crop

[ravipatel]

Audio Media Element CSS Issue

Issue :

Solution :

[ravipatel]

Media element css changes

[audrasjb]

@ravipatel I can't reproduce the issue on Chrome/OSX. Which browser/OS are you using?

[ravipatel]

@audrasjb

i have checked both Firefox and chrome (Version 86.0.4240.183). Both browser on same issue

1920x1080 - Screen resolution

[audrasjb]

Trunk | Chrome Mac OSX: can't reproduce

[SergeyBiryukov]

Hi there, thanks for the ticket.

Just noting that MediaElement.js is an external library, any suggested changes to its files should be submitted upstream: ​https://github.com/mediaelement/mediaelement.

If the fix is included in a future version of MediaElement.js, it will be in WordPress core as well as part of updating the library, there is no need to have an extra Trac ticket for that.

If the issue only exists in WordPress admin, perhaps some of the admin CSS should be adjusted instead.

[SergeyBiryukov]

Seems related to [49343], moving to the milestone for investigation.

[sabernhardt]

Yes, I see that in Firefox/Windows with trunk but not 5.5.2. [49343] overrides content-box on .mejs-time.

I'd rather not edit the height value, but I can check if there's a better option than

.wp-core-ui .mejs-time {
    box-sizing: content-box;
}

[sabernhardt]

box-sizing: content-box for mejs-time containers

[sabernhardt]

Caused by both the box-sizing: border-box and a hidden overflow, Windows browsers Firefox, Chrome and Edge (not IE) cut off the bottom of the time value on the Media attachment page and in the Attachment Details dialog.

51685.1.patch​ resets the time container to content-box, to match the front end.

I also considered showing the overflow instead, but then the horizontal spacing is off in the Attachment Details dialog.

[sabernhardt]

collection of screenshots in Chrome/Windows, before and after applying 51685.1.patch

[antpb]

In 49550:

Media: Adjust box-sizing for audio players.

Fix cropped container around playhead time in audio player.

Props ravipatel, sabernhardt, audrasjb, SergeyBiryukov,
Fixes #51685