Truncating/shrinking datetime-local input can obscure picker button

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Given a datetime-local input inside a fixed-width component, if the width of the input exceeds the width of the container, the trailing end of the input overflows and can become clipped.

Expected Behavior

Instead, the input's width should match its container's, its trailing-edge calendar button should remain visible, and its value should become clipped similar to how the native input works:

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/dyEyZKP

Reproduction Steps

1. Visit the code sample and resize the panel.
2. Observe how the native input truncates the value while the Calcite input is clipped.

Reproduction Version

2.8.0

Relevant Info

Possibly something to also take into account with #7074 and/or #9053.

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

Field Maps presents forms in side-panels. This issue presents a degraded UX and/or requires us to maintain a hard-coded minimum panel-width

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 Field Apps