Closed Bug 1235114 Opened 6 years ago Closed 6 years ago

On Google Play Music "top charts" page, long album titles cause text to overflow

Categories

(Web Compatibility :: Desktop, defect)

x86_64
Windows 10
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: thechrisclayton, Unassigned)

References

(Blocks 1 open bug, )

Details

(Keywords: reproducible, Whiteboard: [bugday-20151228] [sitewait] [country-all] [css])

Attachments

(4 files, 1 obsolete file)

Attached image issue.jpg
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20151221130713

Steps to reproduce:

Log in to Google Play Music with the latest version of Flash installed, click on 'Top charts' and then 'See all' for a number of examples of the album title text issue. Tested with the latest Firefox stable both on an older and fresh profile, plus also tested on the latest Nightly. Issue remains on both.


Actual results:

Albums with long titles have their text creeping out of the edges of each album entry, instead of staying within the box itself. I have included a screenshot and have circled the issue on a number of album entries.


Expected results:

When testing on Chrome, all albums titles remain inside the box and are simply not completely shown (the title is obscured properly if it's too long). On Firefox, the title isn't obscured if too long, but comes right out of the box and looks very odd.
OS: Unspecified → Windows 10
Hardware: Unspecified → x86_64
Keywords: 64bit, reproducible
Attached image bug-1235114.PNG (obsolete) —
¡Hola Chris!

FWIW this seems to WFM on Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0 ID:20151226030212 CSet: 4a559a618d6798eb9a8fdc559f5a7a00085e2062 sans Flash.

Perhaps this is Windows 10 or Flash thing?

¡Gracias!
QA Whiteboard: [bugday-20151228]
Whiteboard: [bugday-20151228]
Environment:
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Nightly 46.0a1 Build ID:20151228030213

and

User Agent Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Nightly 46.0a1 Build ID:20151228030213


It is reproducible. Text continued out of the box. This does not occur in chrome browser.
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout: Form Controls
Ever confirmed: true
Product: Firefox → Core
Attached image text display.PNG
Flags: needinfo?(amasresha)
Thanks! That showed me the right section of the page to look at -- "top charts" (which I now see was mentioned in comment 0 but I skimmed past it. :-/ Sorry, silly me).  I *can* reproduce the bug on that section of Google Music.

I can also reproduce the bug there in Chrome Dev Edition (on the live site & in your attached zip).

Inspecting with devtools shows that this is an issue of bug 1043520 -- Google probably needs to add "min-width:0" to their .material-card .details-inner rule, or else the long-unwrappable-text makes its flex item (the protruding thing) grow unreasonably long (longer than the available space) to fit the text.

This affects all browsers that support "min-width:auto" on flex items, which includes Firefox & Edge & Chrome Dev Edition at least. (chrome versions with the fix for https://code.google.com/p/chromium/issues/detail?id=426898 )  Converting to a Tech Evang issue; Google Play (or the material design library version that they're using) just needs to update.
Component: Layout → Desktop
Flags: needinfo?(dholbert)
Product: Core → Tech Evangelism
Version: 43 Branch → Firefox 43
Flags: needinfo?(amasresha)
Keywords: 64bit
Version: Firefox 43 → unspecified
Summary: Text issues in Google Play Music on albums with long titles → On Google Play Music "top charts" page, long album titles cause text to overflow
Summarizing the bug:
The song title is a flex item, and flex items refuse to be smaller than their minimum intrinsic width (which in this case is the width of the full album-title), unless they're explicitly given "min-width:0". So, Google needs to add "min-width:0" (or some other smallish min-width) to the "details-inner" CSS class, to allow the song title to shrink.

I'm guessing this only "works" in Chrome 47 (current release) due to a bug with calculating the minimum intrinsic width, and that bug is fixed in DevEdition 49, which is why the site bug shows up there.
(I've reached out to Google, and a googler has already forwarded my report along to the Play Music team, so hopefully we'll see action on this soon. Hooray!)
Attachment #8702365 - Attachment is obsolete: true
Whiteboard: [bugday-20151228] → [bugday-20151228] [sitewait] [country-all] [css]
Karl, thanks for the whiteboard update. I actually just re-tested this, and it looks like this it's been fixed -- hooray!

Specifically:
 * I can't reproduce the symptoms anymore (and I do see some names that are too long & fade out as expected, on the "top charts" page).
 * Looking in devtools, I can see that the style rule for ".material-card .details-inner" now has "min-width:0", here:
     https://play-music.gstatic.com/fe/61b406b8f69c820108c5b9957a0a8760/listenstyles.css
   (as we suggested in comment 11).

So: resolving as FIXED.

@thechrisclayton and/or @Abe, it'd be great if you could confirm that this is fixed for you as well. Thanks!
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0
Version 	46.0a1
Build ID 	20160125030203
Update Channel 	nightly

    and

User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Version 	43.0.4
Build ID 	20160105164030
Update Channel 	release

Works for me both in the latest nightly and release versions.
@dholbert I can definitely confirm that this issue has fixed, using the latest Firefox stable (43.0.4). Thanks a lot for looking at this to all involved, I really appreciate that!
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.