1496252 - [Flexbox Inspector][Resize] Long string names exceed their section if the panel is resized

Status: RESOLVED DUPLICATE of bug 1493020

(DevTools :: Inspector, defect)

Description

[Paul_B]

Attachment: 3rd panel resize.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Build ID: 20181003100127

STR:

1. Launch Firefox and navigate to a random page (e.g. nytimes.com)
2. Enable the element inspector.
3. Choose a Flex Container/Item that has a longer "name".
4. Observe the Flexbox Inspector - namely the Flex Container name section and toggle.
5. Resize the 3rd pannel and use then move the horizontal scroll bar to the right. 

Actual result:

The Flex element (Container or Item) name and color picker exceed the section, overlapping the margins, if the string wraps ; If the string does not wrap, this will extend beyond the right edge of the section ( as you can observe in the 2nd attachment )
The Toggle button resizes, becoming a round or flatten dot. (depending on the resize).  
I have attached a couple screen shots for better understanding.

Expected result:

All elements of the Flexbox Inspector are properly displayed and responsive to a resize of the panel. No overlapping or other UI issues are observed.

Comment 1

[Paul_B]

Attachment: resize -- long strings.jpg

Comment 2

[Paul_B]

I've just noticed that there is a bug filed for this issue already. I'll close this as Duplicate.