Playlist track info overflows

[celloexpressions]

See screenshots. This was accounted for for the currently playing item details, but not in the tracklist. It needs the addition of display: block or inline-block, and an appropriate max-width.

[celloexpressions]

Prevent items in track list from overflowing.

[celloexpressions]

This is particularly problematic in scenarios like Twenty Fourteen's Ephemera widgets, and on mobile, where the playlist width is very small. The 40px in the max-width calculation is to leave space for the track duration, which is typically 25-30px but can vary widely. The 88% max-width fallback that's already used for the currently playing view is a sufficient fallback for browsers that don't support calc.

[wonderboymusic]

I think display: block is sufficient (missed that one...) - there are no other places in core that use calc(...), some themes do, but leaving that out for now.

[wonderboymusic]

In 28172:

Properly account for text overflow in .wp-playlist-caption by adding display: block.

Props celloexpressions.
See #27923.

[SergeyBiryukov]

Replying to wonderboymusic:

I think display: block is sufficient (missed that one...) - there are no other places in core that use calc(...)

I've found 3 instances in wp-includes/css/editor.css​ and one in wp-includes/js/thickbox/thickbox.css​.

[wonderboymusic]

touché

[celloexpressions]

I don't see anything wrong with using calc for things like this - that's what it's designed for and most browsers support it now. In this case it allows as much of the track/artist name to be shown as possible, whereas 88% could leave much less space at large widths (an edge case, of course).

[wonderboymusic]

ok, I just try to be conservative so Helen doesn't yell at me

[wonderboymusic]

In 28174:

Add calc() rules for max-width of playlist caption.

Props celloexpressions.
See #27923.

[helen]

Replying to wonderboymusic:

ok, I just try to be conservative so Helen doesn't yell at me

It's appreciated :) We're good here.

[wonderboymusic]

#28049 was marked as a duplicate.

[nacin]

In 28244:

Properly account for text overflow in .wp-playlist-caption by adding display: block.

Merges [28172] to the 3.9 branch.

props celloexpressions.
see #27923.

[nacin]

In 28245:

Add calc() rules for max-width of playlist caption.

Merges [28174] to the 3.9 branch.

props celloexpressions.
fixes #27923.