calcite-color-picker: should be responsive to container sizes

[AdelheidF]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

If color-picker is inside a panel that scrolls vertically then horizontal scrollbars appear in FF. Chrome is fine.

If you set display:flex on the color-picker and overflow:hidden on its container inside the shadow-dom then it's correct.

cc @driskull

Expected Behavior

No horizontal scroll bars in any browser.

Reproduction Sample

https://codepen.io/afreitag/pen/KKYgKzW
https://codepen.io/afreitag/pen/OJqLWEB

Reproduction Steps

Open codepen in Chrome and Firefox. You'll see horizontal scrollbars in FF.

Reproduction Version

2.1.0

Relevant Info

Firefox

Regression?

no

Priority impact

p1 - need for current milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[driskull]

note: Seems like the color-picker component should be more flexible in its sizing. It should respond to its container and not overflow its boundaries.

[geospatialem]

Design expertise sought on the color controls for the container sizing and/if design tokens could mitigate.

[ashetland]

Design work completed with #9415. See this Figma file for new default widths and a fixed 1:1.8 aspect ratio for the color field when resizing the Color Picker.