WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#27923 closed defect (bug) (fixed)

Playlist track info overflows

Reported by: celloexpressions Owned by: nacin
Milestone: 3.9.1 Priority: normal
Severity: normal Version: 3.9
Component: Media Keywords: has-patch commit fixed-major
Focuses: ui Cc:

Description

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.

Attachments (3)

27923.diff (471 bytes) - added by celloexpressions 5 years ago.
Prevent items in track list from overflowing.
27923.before.png (15.3 KB) - added by celloexpressions 5 years ago.
27923.after.png (14.9 KB) - added by celloexpressions 5 years ago.

Download all attachments as: .zip

Change History (17)

@celloexpressions
5 years ago

Prevent items in track list from overflowing.

#1 @celloexpressions
5 years ago

  • Keywords has-patch added

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.

#2 @wonderboymusic
5 years ago

  • Milestone changed from Awaiting Review to 3.9.1

#3 follow-up: @wonderboymusic
5 years ago

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.

#4 @wonderboymusic
5 years ago

In 28172:

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

Props celloexpressions.
See #27923.

#5 in reply to: ↑ 3 @SergeyBiryukov
5 years ago

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.

#7 @celloexpressions
5 years ago

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).

#8 follow-up: @wonderboymusic
5 years ago

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

#9 @wonderboymusic
5 years ago

In 28174:

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

Props celloexpressions.
See #27923.

#10 @wonderboymusic
5 years ago

  • Keywords commit fixed-major added

#11 in reply to: ↑ 8 @helen
5 years ago

Replying to wonderboymusic:

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

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

#12 @wonderboymusic
5 years ago

#28049 was marked as a duplicate.

#13 @nacin
5 years ago

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.

#14 @nacin
5 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In 28245:

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

Merges [28174] to the 3.9 branch.

props celloexpressions.
fixes #27923.

Note: See TracTickets for help on using tickets.