[Input Date Picker] Unexpected styling for `layout="vertical"` in different scales

[macandcheese]

Check existing issues

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

Actual Behavior

The Input Date Picker, when in layout="vertical" - has varying displays based on scale:

Expected Behavior

I'd expect the three scales to have similar visual displays.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/YzgwvLL?editors=1000

Reproduction Steps

1. Open Codepen
2. Note the "m" scale displays as expected.
3. Note the "s" scale does not display an arrow.
4. Note the "l" scale arrow overlaps the icon

Reproduction Version

2.1

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

The lack of arrow in the "s" scale has prevented a team from adopting this component - requiring them to use two separate "Input Date Picker (not range)".

cc @ashetland @SkyeSeitz

Calcite package

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

Esri team

Calcite (design)

[dhagens]

The arrow between the two controls is what our team found useful for using the range option. We can only use this with the small scale where the arrow is removed.

[SkyeSeitz]

Definitely agree with the existing issue. Input Date Picker improvements are planned and address the consistency of range at all scales in the future as a part of a larger Date Picker series of enhancements including issue #3455 and documented in this Figma design file.

The aim is to achieve a less cluttered design as well as less problematic to achieve consistently across all scales, but still clear in context.

[brittneytewks]

Planned to be addressed in Input Date Picker work in issue #6721