Closed Bug 1493020 Opened 2 years ago Closed 2 years ago
Long flex container label (from long classname or many class names) can cause content to vertically overlap in flexbox layout inspector pane
(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.
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
This seems fixed with Bug 1490101
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1490101
You need to log in before you can comment on or make changes to this bug.