Media controls in the media grid are too wide

[johnbillion]

The audio and video player that's shown when viewing an individual media item in the media grid displays a control bar which is too wide for its container.

Tested in latest Chrome, Firefox, and Safari on macOS.

[johnbillion]

Screenshot

[johnbillion]

Broken in 4.9.

[Hafiz]

tested in Safari

[Hafiz]

tested in Chrome

[Hafiz]

tested in Firefox

[Hafiz]

Just noticed that my screenshot for Safari above doesn't show the media controls; on Safari they get hidden automatically once the cursor stops hovering on them. Here's the right screenshot.

[pento]

I'm only able to reproduce this behaviour when I disable concatenation with load-styles.php.

There are two styles here that depend on the load order:

In media-views.css, we have this rule:

.media-modal * {
    box-sizing: content-box;
}

In mediaelementplayer-legacy.min.css we have this rule:

.mejs-container, .mejs-container * {
    box-sizing: border-box;
}

With concatenation disabled, mediaelementplayer-legacy.min.css loads before media-views.css, causing the incorrect behaviour.

With concatenation enabled, media-views.css is concatenated, but mediaelementplayer-legacy.min.css is not. The load-styles.php with media-views.css is loaded before mediaelementplayer-legacy.min.css, which applies the CSS rules in the correct order.