Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow very long words in banner to break to another line #2155

Merged
merged 7 commits into from
Jun 5, 2024

Conversation

m-akinc
Copy link
Contributor

@m-akinc m-akinc commented Jun 3, 2024

Pull Request

🀨 Rationale

Fixes #2153

πŸ‘©β€πŸ’» Implementation

  • 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

  • I have updated the project documentation to reflect my changes or determined no changes are needed.

@m-akinc
Copy link
Contributor Author

m-akinc commented Jun 3, 2024

@atmgrifter00 would you mind buddying?

@m-akinc m-akinc requested a review from atmgrifter00 June 3, 2024 21:51
@m-akinc m-akinc marked this pull request as ready for review June 3, 2024 22:32
@m-akinc m-akinc requested a review from rajsite June 4, 2024 18:09
@m-akinc m-akinc requested a review from jattasNI June 4, 2024 20:51
@rajsite rajsite enabled auto-merge (squash) June 5, 2024 16:08
@rajsite rajsite merged commit 1d6c2e9 into main Jun 5, 2024
11 checks passed
@rajsite rajsite deleted the users/makinc/fix-banner-word-wrapping branch June 5, 2024 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Long words can cause cut-off text in banner
4 participants