[Toasts] long text without white space overflows outside toast element

[eokoneyo]

Describe the bug
If it does happen that an EuiToast is to be rendered with a title text that's long and doesn't contain any white space the text doesn't wrap but rather overflows outside of the toast element.

Impact and severity
when this occurs, it's pretty visible and jarring. Also see elastic/kibana#178351

Environment and versions

• EUI version: 93.2.0

To Reproduce
Steps to reproduce the behavior:

1. Go to any setup that would render a toast
2. Pass said toast a title that's pretty long, and doesn't contain white space
3. On render the toast will have it's title overflow out of the toast item that received the title text.

Expected behavior
The title text should wrap within the context of the toast element and not overflow outside of the toast.

Screenshots

Actual

Expected

[cee-chen]

I believe the original impetus for not baking this in was to force consumers to evaluate the copy/content they were passing into toast titles (i.e., it could be argued the onus is on the consumer to truncate the PDF name to a certain character limit, and not on EUI). However, our own docs example has an overflow issue so I'm not sure how true this still is 🥲

I chatted with @florent-leborgne about this and he agreed that we should go ahead and always wrap overflowing text. He'll also revisit our toast guidelines at some point with suggestions on best practices in using IDs in toast titles.

[eokoneyo]

I do agree that ideally the onus should be on the consumer to account for the rendering of the text being passed in especially that it accepts a ReactNode, I'd raised this issue because for this case (and any case) where the full text would rather be displayed one can't correct for this externally given the current markup.

Thanks for the quick turn around, and I quite look forward to seeing the update guidelines for IDs in toast titles.