Audio widget overflows sidebar container element

[alexvorn2]

I have it in a sidebar in the Twenty Fifteen, and it looks to looong, maybe other themes have the same problem.

How to replicate:

1. Activate Twenty Fifteen theme
2. Add Audio widget to the sidebar
3. Add a song and view the page.

[alexvorn2]

You can see how Audio Widget looks into the Twenty Fifteen theme

[alexvorn2]

I tested other bundled themes, I can see a problem only on this theme (Twenty Fifteen).

[westonruter]

@bradyvercher @rafa8626 Would this be a back-compat problem? (Ref. #42189)

See also #42203.

[bradyvercher]

@westonruter I'm not sure if that's a back-compat issue, but the JS sizing in MediaElement has always been a bit wonky. Taking a cue from [41838], I think adding max-width: 100% to the .mejs-container rules at the top of wp-mediaelement.css should take care of this.

[westonruter]

It does seem to be a regression. The audio player looks fine in 4.8.2.

In 4.8.2, I see the .mejs-container element has width:100% whereas in trunk it has width: 412.641px; and min-width: 227px;.

Adding a max-width is not helping here because unlike wp_video_shortcode() which outputs the video wrapper elements statically (the div.wp-video), the wp_audio_shortcode() wraps the audio element dynamically in JS. So the max-width gets added to the audio element which is not shown anyway.

[westonruter]

Simply adding a div.wp-audio to wrap around the audio element seems to fix the overflow problem (for some reason). See wp-audio-container.png​. The player, however, doesn't seem to display optimally in this small size. See audio-widget-in-4.8.2.png​ for how the Audio widget looks in 4.8.2.

[westonruter]

@rafa8626 Is this something you can look into?

[bradyvercher]

@westonruter 42244.1.diff​ is what I was suggesting. I wouldn't recommend adding an extra div to solve this.

[westonruter]

In 41886:

Widgets: Prevent MediaElement.js player from overflowing sidebar in Audio widget.

Props bradyvercher.
See #39686.
Fixes #42244.