Fix text wrapping on program summary and preview view.

[ettengererin]

Description

Bug addressed: Text does not wrap for long words, like copy/pasted URLs, in the application summary rows. We added custom CSS to break long words in order to wrap text.

There is a similar tailwind.css property - https://tailwindcss.com/docs/word-break#break-words. However, the tailwind css does not actually behave as expected and does not solve the issue (looks like this property is not maintained by tailwind anymore).

Adding Bion as a reviewer here to confirm that adding custom css in this way is safe and to recommend any alternatives.

Before:

After:

Checklist

• Created tests which fail without the change (if possible)
• Extended the README / documentation, if necessary

Issue(s)

Fixes #1567

[bion]

Looks like an important improvement!

Please use the tailwind style system whenever possible. In this case I believe you can add this constant to the class list to get the same result https://github.com/seattle-uat/civiform/blob/main/universal-application-tool-0.0.1/app/views/style/Styles.java#L2526

[bion]

tailwind docs: https://tailwindcss.com/docs/word-break

[ettengererin]

We tried this tailwind property already, noted it in the PR description above:

Tailwind's break-words property does not actually behave as expected and does not solve the issue (looks like this property is not maintained by tailwind anymore). It does not properly wrap the long word text -- The URL link still overflows off the container. Seems like others experienced this problem: tailwindlabs/tailwindcss#835

Break-words from tailwind adds this css:
{overflow-wrap: break-word;}

The custom css we use adds
{word-break: break-word}

Seems like older versions of tailwind worked properly for this use case, but the newer versions are causing this issue for folks.

[bion]

Ah! So sorry for not reading the description properly.

[ettengererin]

No worries! Thanks for the review :D