Very long words in strings are breaking UI

[audrasjb]

Hello,

A french team contributor noticed very long words can break GlotPress UI.

Example: https://translate.wordpress.org/projects/wp-plugins/duplicate-page/stable-readme/fr/default?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=5633108&filters%5Btranslation_id%5D=53864572

A small patch will follow this issue.

Cheers,
Jb

[fr-laurentn]

@audrasjb Thanks for reporting the issue.

Actually, the issue I noticed was when the editor is closed.
So it seems that you only fixed part of the issue.

Example:

If you look at the CSS, there's an invalid property:

table.translations td.original, table.translations td.translation {
    width: 45%;
    word-break: break-word;
    word-wrap: break-word;
}

If you replace word-break: break-word; with word-break: break-all it seems to fix it.

[toolstack]

There are a few places long words break the display of the wrapping (including in context strings as well), I think I've caught them all in #877.