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

RESOLVED DUPLICATE of bug 1490101

Status

defect
P3
normal
RESOLVED DUPLICATE of bug 1490101
7 months ago
7 months ago

People

(Reporter: dholbert, Assigned: gl)

Tracking

(Blocks 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

7 months ago
Posted file 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.
(Reporter)

Comment 1

7 months ago
Posted image screenshot
(Reporter)

Updated

7 months ago
Flags: needinfo?(gl)
(Reporter)

Comment 2

7 months ago
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.
Summary: Long flex container label can cause content to vertically overlap in flexbox layout inspector pane → Long flex container label (from long classname or many class names) can cause content to vertically overlap in flexbox layout inspector pane
(Assignee)

Updated

7 months ago
Flags: needinfo?(gl)
(Assignee)

Updated

7 months ago
Priority: -- → P3
(Assignee)

Updated

7 months ago
Blocks: 1478396
No longer blocks: 1470379

Updated

7 months ago
Duplicate of this bug: 1496252
(Assignee)

Updated

7 months ago
Assignee: nobody → gl
Status: NEW → ASSIGNED
(Assignee)

Comment 4

7 months ago
This seems fixed with Bug 1490101
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1490101
You need to log in before you can comment on or make changes to this bug.