Set overflow-wrap: anywhere on the banner. This causes long words to first be wrapped to a new line, but if they still overflow, then the word is broken at the point it would overflow.
Add a very long word to the banner's Chromatic tests
Removed white-space: nowrap from the banner title styling because it was causing some/all of the action button/link and close control to be out-of-view when both the title and the button/link text were long. See Chromatic diff for details.
๐งช Testing
Storybook
โ Checklist
[x] I have updated the project documentation to reflect my changes or determined no changes are needed.
Pull Request
๐คจ Rationale
Fixes #2153
๐ฉโ๐ป Implementation
overflow-wrap: anywhere
on the banner. This causes long words to first be wrapped to a new line, but if they still overflow, then the word is broken at the point it would overflow.white-space: nowrap
from the banner title styling because it was causing some/all of the action button/link and close control to be out-of-view when both the title and the button/link text were long. See Chromatic diff for details.๐งช Testing
Storybook
โ Checklist