GradientPicker value gets cut off in block editor sidebar Popovers

[chad1008]

Description

When using an AnglePickerControl to adjust a value like the angle of a gradient, the value displayed for the current angle gets cut off if it's more than two digits long, when you'd expect the entire numerical value to remain visible.

This isn't reproducible in Storybook when viewing GraidentPicker directly - it appears to be a result of the padding applied by the clock editors color selection component.

Step-by-step reproduction instructions

1. Create a new post or page
2. Create a new paragraph block
3. In the block settings, edit the background color
4. Select the Gradient tab
5. Use the GradientPicker control to change the angle to any value with three digits

Screenshots, screen recording, code snippet

Environment info

WP 6.2-alpha-54791
GB 14.5.0
Chrome 107.0.5304.110

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mirka]

Good catch! I think the direction we'll go is to first update the swatches to be the new 20px size (#43014), and then increase the popover width to accommodate 8 swatches in a row. This should allow more space so the AnglePickerControl fits 3 digits without overflowing.