[List Item] Selection padding has too much space when the List's width is reduced

[geospatialem]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

When updating from value-list to list in smaller width use cases for selections, additional padding is added, which effects the look of the component:

Before with value-list	After with list

Expected Behavior

Replace the existing 12px padding to the right of the component's selectionAppearance of "icon" for selectionMode's of "multiple", "single" and "single-persist" to 4px with the --calcite-spacing-xxs token:

Reproduction Sample

https://codepen.io/geospatialem/pen/WNBNeNe

Reproduction Steps

1. Open the sample
2. Observe the padding on the left example: selection-mode="icon"
3. Observe the padding in the other two examples
4. This can also be observed on the documentation site samples
5. Compare to this value-list sample

Reproduction Version

2.8.0

Relevant Info

Refer to the impact statement below.

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

Came up when the Analysis team converted their pick-list to list, where when confined to a smaller width panel, the padding takes up a considerable amount of space. They are considering reverting back to pick-list if a fix cannot be mitigated, and would have to migrate over after the breaking change release when #7100 is implemented.

Calcite package

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

Esri team

ArcGIS Web Analysis

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[geospatialem]

cc @amring1

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified locally on hotfix