Fix word-wrapping behavior of machine names in UI tables

I think we should expand the scope to include also the Label column.

The label column does not break lines at all while the machine name which needs to be an exact reference does. It is not common to have very long words in labels, but in some languages and some edge cases there may be fairly long words.

The text seem to jus inherit hyphens: auto from body.
word-break property seems no to be set at all.

For the machine names we would want to have them readable as is an also copy them for pasting elsewhere. It is a common use case that the start of the machine name is the same for several fields and the end is significant. This speaks against having an ellipses. Thus I suggest adding

word-break: break-word;
hyphens: none;

for the machine name (it's always a single word anyway)

For the label I think it would make sense to have word-break: break-word; but keeping the default auto-hyphens.

I wonder if it would merit to have a separate class to handle the unhyphened breaking words so that it would be reusable where need arises? Or would that be an overkill?

Usability review

We discussed this issue at 📌 Drupal Usability Meeting 2024-07-05 Needs work . That issue will have a link to a recording of the meeting. For the record, the attendees at today's usability meeting were @benjifisher, @rachelh_design, @rkoller, @shaal, and @simohell.

If you want more feedback from the usability team, a good way to reach out is in the #ux channel in Slack.

We reached a consensus, that the best option for now, is to allow machine names to break word, but disable hyphenation.

We recommend limiting the scope to this single change and leave the rest for existing functionality and rendering implemented by each browser. For future, in a much wider context, we could consider using for mobile/narrow viewport a structure different from html table to improve usability.