Avoid Layout pane overflows due to the color swatch hover style
Avoid Layout pane overflows due to the color swatch hover style

Color swatches are displayed in the Layout pane to let users change the
colors of the various overlays.
These swatches have a hover style that uses transform:scale(1.2) to
make them look at little bit bigger when hovered.

Depending on the available width, this hover style may, sometimes,
cause horizontal overflow in the panel.
This is particularly annoying on windows as this creates a horizontal
scrollbar that normally isn't there, and therefore changes the height
of the panel, sometimes leading to situations where the height jumps
rapidly.

The Layout pane handles various available width by re-arranging its
content in multiple columns and using ellipsis. So there isn't a case
where this panel needs to overflow.
So we can safely just hide overflows.

Before: https://imgur.com/3FxkwLp
After: https://imgur.com/2eIJHcj

Bug: 1168446
Change-Id: I781a50a9c1d1cda80dc1545c50958a737da2c277
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2640172
Reviewed-by: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
Commit-Queue: Patrick Brosset <f0b1693d3ec18fb190dd6deddb896f34ba3fd693@microsoft.com>

ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend