Let's look into text wrapping

[zarahzachz]

I feel like we notified of a text-wrapping issue about every PI and it's almost always because a word with MANY characters (email addresses, medications) doesn't properly break to allow the text to wrap in a readable fashion.

This was posted from the Accounts team yesterday:

I offered a short-term solution for them to add a word-break: break-all style to the lengthy text, but there has to be a more sustainable solution.

[zarahzachz]

Initially, I thought our ds-u-word-break utility class would be enough, but when I applied it it didn't seem to do what we needed.

It's also interesting this class doesn't contain the word-break style at all, so perhaps it's misnamed? This utility class contains:

    word-wrap: break-word;
    overflow-wrap: break-word;

[zarahzachz]

If we were to update our utility class, I think we should look at what Tailwind's doing with they're three different utilities for this.

[zarahzachz]

MDN has more info on the different ways a word-break can happen.

[zarahzachz]

• IBM Carbon: Seems to add a word-break style to component body areas to account for wrapping there
• GH Primer: Doesn't account for this (at least in their Flash component)
• Material UI (React): Uses overscroll: auto (at least on their Alerts) to solve for long words

[zarahzachz]

I can see merit in two of these options (I don't think doing nothing is a valid path forward).

Aesthetically, word-break looks nicest to me, however I think an argument could be made that in preserving the word in its entirety, overscroll might be more accessible from a cognitive standpoint. But I don't know.