Fix the mediaelements player controls bar sizing

[afercia]

In the media views, the mediaelements player controls bar exceeds the width of the video. See attached screenshot.

This happens because the media views stylesheet switches everything to content-box sizing, while it appears the mediaelements player expects border-box.

This CSS rule in media-views.css:

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

conflicts with this CSS rule in mediaelementplayer-legacy.min.css:

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

Explicitly setting box-sizing: border-box; with some higher specificity to the mediaplayer .mejs-controls element fixes the problem.

[vaishalipanchal]

Patch.

[chetan200891]

Created patch.

[afercia]

@vaishalipanchal @chetan200891 thanks for your patches! 47457.2.diff​ seems a better approach to me, as it's better scoped to only target the player controls (we can't change box-sizing for all the elements in the media views).

[afercia]

In 45497:

Fix the media player controls bar width in the media views.

Props vaishalipanchal, chetan200891.
Fixes #47457.

[audrasjb]

Let's try to add this one to 5.2.2 as it is self contained and already tested, patched, commited :-)

[SergeyBiryukov]

Moving back to 5.3, as 5.2.2 is out and this was not actually reopened for backporting to the branch, so it's only in trunk at the moment.

When moving tickets from the next major release to the next minor, please don't forget to reopen and add the fixed-major keyword.