1493020 - Long flex container label (from long classname or many class names) can cause content to vertically overlap in flexbox layout inspector pane

Status: RESOLVED DUPLICATE of bug 1490101

(DevTools :: Inspector, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(This is like bug 1490101, but in this case it's the flex *container* whose long label is causing problems. And it's slightly different problem.)

STR:
 1. Load attached testcase, which has a flex container with a long classname.

 2. Inspect the flex container in the Layout devtools panel.

 3. Resize the Layout devtools panel to be skinnier.

ACTUAL RESULTS:
The flex container's label escapes the section that it's supposed to be contained in. It ends up stomping on its section title (above it) as well as content below it. See attached screenshot.

EXPECTED RESULTS:
The label should probably be ellipsized, or faded out, or otherwise clipped/clamped.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 2

[Daniel Holbert [:dholbert]]

I ran into this bug in the wild, BTW, at "YouTube Gaming", when using the flex inspector to investigate some flex container sizing in bug 1491308.

YouTube gaming has a flex container element which looks like this:
 <div class="layout horizontal center-center style-scope ytg-playlist-panel-video-renderer">

And it seems our flexbox inspector concatenates all of those together when creating the label:
 "div.layout.horizontal.[etc]"

So: it's not necessary to have a single long classname -- a bunch of short classnames can trigger this as well.

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

This seems fixed with Bug 1490101