modal: buttons exceed modal container when they have long text

[dFranz2]

Check existing issues

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

Actual Behavior

Buttons with long strings will overflow beyond the modal container. This was discovered when testing pseudo-translations.

Expected Behavior

I would expect buttons to have a max width that's proportional to the modal scale, if the width is not set. The strings should be truncated if the text exceeds the button width.

Reproduction Sample

https://codepen.io/dmap/pen/rNXeJqr

Reproduction Steps

1. Create a modal
2. Add buttons (primary, secondary, and back) with long text

Reproduction Version

2.13.0

Relevant Info

No response

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Minor. We can add a temporary fix by setting a max-width on the buttons used in modals

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

[siq10677]

There is a similar case with calciate-popover.