Color Picker component causes horizontal scrollbars in Block Settings sidebar

[begroff]

Description

The CSS for the color picker component is causing horizontal scrollbars in the block settings sidebar on desktop browser. I have a call to action custom block that is using the ColorPicker component inside of InspectorControls, inside of a PanelBody, inside of a PanelRow. I was developing this custom block using WordPress version 5.4 and when I updated to 5.6.2 it caused horizontal scrollbars to appear.

Step-by-step reproduction instructions

1. Add the custom block JS so it is available in the editor (gist link in code snippet)
2. Search for Call to Action and add the block
3. Highlight the block to bring up inspector controls
4. Look at the panel section called Overlay

Expected behaviour

No horizontal scrollbars should appear in the block settings sidebar

Actual behaviour

Horizontal scrollbars are appearing in the block settings sidebar

Screenshots or screen recording (optional)

Code snippet (optional)

https://gist.github.com/begroff/9c66a539d70f43eb816931caabd1e175

WordPress information

• WordPress version: 5.6.2
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? N/A
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: Desktop
• Operating system: Ubuntu 18.04
• Browser: Chrome 88.0.4324.182 / Firefox 86.0

[begroff]

I mocked up a fix for this

.components-base-control__label { /* This is probably a catch all for the hexadecimal label but there wasn't a specific class on this element */
    width: 100%
}

.components-color-picker__inputs-wrapper {
    align-items: flex-start;
}

.components-color-picker__inputs-toggle-wrapper {
    margin: 26px 0 0 0;
    border: 1px solid #757575;
    border-radius: 2px;
    height: 30px;
}

[jameskoster]

I believe this should be fixed by #41646