The calcite-card component does not render its width correctly when it contains a single, unbroken word with an excessive number of characters

[knbhagat]

monday.com sync: #18202508039

Check existing issues

• I have checked for existing issues to avoid duplicates

Which Component

Card

Actual Behavior

When a calcite-card contains a single, unbroken word with a large number of characters (e.g., a long URL or continuous string), the component fails to properly constrain its width when truncated. This results in layout overflow and visual distortion.

Expected Behavior

The expected behavior is for the card to maintain its defined width and apply appropriate text wrapping or truncation to preserve the intended design.

Reproduction Sample

https://codepen.io/knbhagat/pen/jEWaYON?editors=100

Reproduction Steps

Issue is reproduced in the codedpen link

Reproduction Version

3.3.3

Relevant Info

Add a max-width : calc(100% - 1.5rem) to the .header-text-container selector

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

This bug is currently being produced in our codebase and can be reflected on QA. This can be seen through this PR comment

Calcite package

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

Esri team

ArcGIS Hub