i18n: adding "word-break: keep-all" to .mx_AccessibleButton

[luixxiul]

Steps to reproduce

1. Change Element language setting to Japanese (or Chinese/Korean)
2. Open a Space's setting
3. Check the string next to the profile picture to upload it.

Outcome

What did you expect?

The anchor link text should not be collapsed/broken. Here アップロード means Upload.

If text inside buttons with should not be collapsed in general, the button .mx_AccessibleButton should have word-break: keep-all.

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#values

keep-all

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.

Replacing min-width: min-content of the button with min-width: fit-content should work as well.

What happened instead?

The text are collapsed per a couple of characters and ugly.

Here is another example, a link button to expand the collapsed messages on a room history.

Without word-break: keep-all:

With word-break: keep-all:

(展開 means expand here)

Operating system

No response

Browser information

No response

URL for webapp

localhost

Application version

develop branch

Homeserver

No response

Will you send logs?

No

[luixxiul]

Here is another example:

Steps to reproduce:

1. Change the language setting to Chinese/Japanese/Korean
2. Send a message in thread
3. Edit the message
4. Collapsed cancel and save buttons appear

[luixxiul]

IMO this issue does not really need a product design as this does not change the way how strings should be displayed. Instead, the PR for this issue should achieve the intended design for CJK languages.

[luixxiul]

I will keep an eye on UI in Japanese for a regression.

For Japanese users: もしボタン内のテキストの表示に不自然なところ、regressionなどがありましたらお知らせください。対処を試みます。