Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
luixxiul opened this issue Mar 3, 2022 · 3 comments · Fixed by matrix-org/matrix-react-sdk#8212
Closed

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

luixxiul opened this issue Mar 3, 2022 · 3 comments · Fixed by matrix-org/matrix-react-sdk#8212
Labels
O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect X-Needs-Design

Comments

@luixxiul
Copy link

luixxiul commented Mar 3, 2022 •
edited
Loading

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.

after

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.

before

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

Without word-break: keep-all:

before

With word-break: keep-all:

after

(展開 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
Copy link
Author

luixxiul commented Mar 3, 2022

Here is another example:

before

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

@dbkr dbkr added O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience S-Minor Impairs non-critical functionality or suitable workarounds exist X-Needs-Design labels Mar 3, 2022
@luixxiul luixxiul mentioned this issue Mar 15, 2022
Closed
This was referenced Mar 26, 2022
Closed
Merged
@luixxiul
Copy link
Author

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.

turt2live pushed a commit to matrix-org/matrix-react-sdk that referenced this issue Apr 9, 2022
@luixxiul
Fixes button labels being collapsed per a character in CJK languages (#…
61076c3 
…8212)

* Fixes button labels being collapsed per a character in CJK languages

Closes element-hq/element-web#21287

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add a comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
@luixxiul
Copy link
Author

luixxiul commented Apr 9, 2022

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

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

su-ex added a commit to SchildiChat/element-desktop that referenced this issue Apr 30, 2022
@su-ex
Merge tag 'v1.10.11' into sc
f7b7ded 
* Handle forced disconnects from Jitsi ([\#21697](element-hq/element-web#21697)). Fixes element-hq/element-web#21517.
* Improve performance of switching to rooms with lots of servers and ACLs ([\#8347](matrix-org/matrix-react-sdk#8347)).
* Avoid a reflow when setting caret position on an empty composer ([\#8348](matrix-org/matrix-react-sdk#8348)).
* Add message right-click context menu as a labs feature ([\#5672](matrix-org/matrix-react-sdk#5672)).
* Live location sharing - basic maximised beacon map ([\#8310](matrix-org/matrix-react-sdk#8310)).
* Live location sharing - render users own beacons in timeline ([\#8296](matrix-org/matrix-react-sdk#8296)).
* Improve Threads beta around degraded mode ([\#8318](matrix-org/matrix-react-sdk#8318)).
* Live location sharing -  beacon in timeline happy path ([\#8285](matrix-org/matrix-react-sdk#8285)).
* Add copy button to View Source screen ([\#8278](matrix-org/matrix-react-sdk#8278)). Fixes element-hq/element-web#21482. Contributed by @olivialivia.
* Add heart effect ([\#6188](matrix-org/matrix-react-sdk#6188)). Contributed by @CicadaCinema.
* Update new room icon ([\#8239](matrix-org/matrix-react-sdk#8239)).
* Prevent packing of native modules ([\element-hq#337](element-hq#337)). Fixes element-hq/element-web#17188. Contributed by @PF4Public.
* Fix: "Code formatting button does not escape backticks" ([\#8181](matrix-org/matrix-react-sdk#8181)). Contributed by @yaya-usman.
* Fix beta indicator dot causing excessive CPU usage ([\#8340](matrix-org/matrix-react-sdk#8340)). Fixes element-hq/element-web#21793.
* Fix overlapping timestamps on empty messages ([\#8205](matrix-org/matrix-react-sdk#8205)). Fixes element-hq/element-web#21381. Contributed by @goelesha.
* Fix power selector not showing up in user info when state_default undefined ([\#8297](matrix-org/matrix-react-sdk#8297)). Fixes element-hq/element-web#21669.
* Avoid looking up settings during timeline rendering ([\#8313](matrix-org/matrix-react-sdk#8313)). Fixes element-hq/element-web#21740.
* Fix a soft crash with video rooms ([\#8333](matrix-org/matrix-react-sdk#8333)).
* Fixes call tiles overflow ([\#8096](matrix-org/matrix-react-sdk#8096)). Fixes element-hq/element-web#20254. Contributed by @luixxiul.
* Fix a bug with emoji autocomplete sorting where adding the final "&element-hq#58;" would cause the emoji with the typed shortcode to no longer be at the top of the autocomplete list. ([\#8086](matrix-org/matrix-react-sdk#8086)). Fixes element-hq/element-web#19302. Contributed by @commonlawfeature.
* Fix image preview sizing for edge cases ([\#8322](matrix-org/matrix-react-sdk#8322)). Fixes element-hq/element-web#20088.
* Refactor SecurityRoomSettingsTab and remove unused state ([\#8306](matrix-org/matrix-react-sdk#8306)). Fixes matrix-org/element-web-rageshakes#12002.
* Don't show the prompt to enable desktop notifications immediately after registration ([\#8274](matrix-org/matrix-react-sdk#8274)).
* Stop tracking threads if threads support is disabled ([\#8308](matrix-org/matrix-react-sdk#8308)). Fixes element-hq/element-web#21766.
* Fix some issues with threads rendering ([\#8305](matrix-org/matrix-react-sdk#8305)). Fixes element-hq/element-web#21670.
* Fix threads rendering issue in Safari ([\#8298](matrix-org/matrix-react-sdk#8298)). Fixes element-hq/element-web#21757.
* Fix space panel width change on hovering over space item ([\#8299](matrix-org/matrix-react-sdk#8299)). Fixes element-hq/element-web#19891.
* Hide the reply in thread button in deployments where beta is forcibly disabled ([\#8294](matrix-org/matrix-react-sdk#8294)). Fixes element-hq/element-web#21753.
* Prevent soft crash around room list header context menu when space changes ([\#8289](matrix-org/matrix-react-sdk#8289)). Fixes matrix-org/element-web-rageshakes#11416, matrix-org/element-web-rageshakes#11692, matrix-org/element-web-rageshakes#11739, matrix-org/element-web-rageshakes#11772, matrix-org/element-web-rageshakes#11891 matrix-org/element-web-rageshakes#11858 and matrix-org/element-web-rageshakes#11456.
* When selecting reply in thread on a thread response open existing thread ([\#8291](matrix-org/matrix-react-sdk#8291)). Fixes element-hq/element-web#21743.
* Handle thread bundled relationships coming from the server via MSC3666 ([\#8292](matrix-org/matrix-react-sdk#8292)). Fixes element-hq/element-web#21450.
* Fix: Avatar preview does not update when same file is selected repeatedly ([\#8288](matrix-org/matrix-react-sdk#8288)). Fixes element-hq/element-web#20098.
* Fix a bug where user gets a warning when changing powerlevel from **Admin** to **custom level (100)** ([\#8248](matrix-org/matrix-react-sdk#8248)). Fixes element-hq/element-web#21682. Contributed by @Jumeb.
* Use a consistent alignment for all text items in a list ([\#8276](matrix-org/matrix-react-sdk#8276)). Fixes element-hq/element-web#21731. Contributed by @luixxiul.
* Fixes button labels being collapsed per a character in CJK languages ([\#8212](matrix-org/matrix-react-sdk#8212)). Fixes element-hq/element-web#21287. Contributed by @luixxiul.
* Fix: Remove jittery timeline scrolling after jumping to an event ([\#8263](matrix-org/matrix-react-sdk#8263)).
* Fix regression of edits showing up in the timeline with hidden events shown ([\#8260](matrix-org/matrix-react-sdk#8260)). Fixes element-hq/element-web#21694.
* Fix reporting events not working ([\#8257](matrix-org/matrix-react-sdk#8257)). Fixes element-hq/element-web#21713.
* Make Jitsi widgets in video rooms immutable ([\#8244](matrix-org/matrix-react-sdk#8244)). Fixes element-hq/element-web#21647.
* Fix: Ensure links to events scroll the correct events into view ([\#8250](matrix-org/matrix-react-sdk#8250)). Fixes element-hq/element-web#19934.
su-ex added a commit to SchildiChat/element-web that referenced this issue Apr 30, 2022
@su-ex
Merge tag 'v1.10.11' into sc
f1edcac 
* Handle forced disconnects from Jitsi ([\element-hq#21697](element-hq#21697)). Fixes element-hq#21517.
* Improve performance of switching to rooms with lots of servers and ACLs ([\element-hq#8347](matrix-org/matrix-react-sdk#8347)).
* Avoid a reflow when setting caret position on an empty composer ([\element-hq#8348](matrix-org/matrix-react-sdk#8348)).
* Add message right-click context menu as a labs feature ([\element-hq#5672](matrix-org/matrix-react-sdk#5672)).
* Live location sharing - basic maximised beacon map ([\element-hq#8310](matrix-org/matrix-react-sdk#8310)).
* Live location sharing - render users own beacons in timeline ([\element-hq#8296](matrix-org/matrix-react-sdk#8296)).
* Improve Threads beta around degraded mode ([\element-hq#8318](matrix-org/matrix-react-sdk#8318)).
* Live location sharing -  beacon in timeline happy path ([\element-hq#8285](matrix-org/matrix-react-sdk#8285)).
* Add copy button to View Source screen ([\element-hq#8278](matrix-org/matrix-react-sdk#8278)). Fixes element-hq#21482. Contributed by @olivialivia.
* Add heart effect ([\element-hq#6188](matrix-org/matrix-react-sdk#6188)). Contributed by @CicadaCinema.
* Update new room icon ([\element-hq#8239](matrix-org/matrix-react-sdk#8239)).
* Fix: "Code formatting button does not escape backticks" ([\element-hq#8181](matrix-org/matrix-react-sdk#8181)). Contributed by @yaya-usman.
* Fix beta indicator dot causing excessive CPU usage ([\element-hq#8340](matrix-org/matrix-react-sdk#8340)). Fixes element-hq#21793.
* Fix overlapping timestamps on empty messages ([\element-hq#8205](matrix-org/matrix-react-sdk#8205)). Fixes element-hq#21381. Contributed by @goelesha.
* Fix power selector not showing up in user info when state_default undefined ([\element-hq#8297](matrix-org/matrix-react-sdk#8297)). Fixes element-hq#21669.
* Avoid looking up settings during timeline rendering ([\element-hq#8313](matrix-org/matrix-react-sdk#8313)). Fixes element-hq#21740.
* Fix a soft crash with video rooms ([\element-hq#8333](matrix-org/matrix-react-sdk#8333)).
* Fixes call tiles overflow ([\#8096](matrix-org/matrix-react-sdk#8096)). Fixes element-hq#20254. Contributed by @luixxiul.
* Fix a bug with emoji autocomplete sorting where adding the final "&element-hq#58;" would cause the emoji with the typed shortcode to no longer be at the top of the autocomplete list. ([\element-hq#8086](matrix-org/matrix-react-sdk#8086)). Fixes element-hq#19302. Contributed by @commonlawfeature.
* Fix image preview sizing for edge cases ([\element-hq#8322](matrix-org/matrix-react-sdk#8322)). Fixes element-hq#20088.
* Refactor SecurityRoomSettingsTab and remove unused state ([\element-hq#8306](matrix-org/matrix-react-sdk#8306)). Fixes matrix-org/element-web-rageshakes#12002.
* Don't show the prompt to enable desktop notifications immediately after registration ([\element-hq#8274](matrix-org/matrix-react-sdk#8274)).
* Stop tracking threads if threads support is disabled ([\element-hq#8308](matrix-org/matrix-react-sdk#8308)). Fixes element-hq#21766.
* Fix some issues with threads rendering ([\element-hq#8305](matrix-org/matrix-react-sdk#8305)). Fixes element-hq#21670.
* Fix threads rendering issue in Safari ([\element-hq#8298](matrix-org/matrix-react-sdk#8298)). Fixes element-hq#21757.
* Fix space panel width change on hovering over space item ([\element-hq#8299](matrix-org/matrix-react-sdk#8299)). Fixes element-hq#19891.
* Hide the reply in thread button in deployments where beta is forcibly disabled ([\element-hq#8294](matrix-org/matrix-react-sdk#8294)). Fixes element-hq#21753.
* Prevent soft crash around room list header context menu when space changes ([\element-hq#8289](matrix-org/matrix-react-sdk#8289)). Fixes matrix-org/element-web-rageshakes#11416, matrix-org/element-web-rageshakes#11692, matrix-org/element-web-rageshakes#11739, matrix-org/element-web-rageshakes#11772, matrix-org/element-web-rageshakes#11891 matrix-org/element-web-rageshakes#11858 and matrix-org/element-web-rageshakes#11456.
* When selecting reply in thread on a thread response open existing thread ([\#8291](matrix-org/matrix-react-sdk#8291)). Fixes element-hq#21743.
* Handle thread bundled relationships coming from the server via MSC3666 ([\element-hq#8292](matrix-org/matrix-react-sdk#8292)). Fixes element-hq#21450.
* Fix: Avatar preview does not update when same file is selected repeatedly ([\element-hq#8288](matrix-org/matrix-react-sdk#8288)). Fixes element-hq#20098.
* Fix a bug where user gets a warning when changing powerlevel from **Admin** to **custom level (100)** ([\element-hq#8248](matrix-org/matrix-react-sdk#8248)). Fixes element-hq#21682. Contributed by @Jumeb.
* Use a consistent alignment for all text items in a list ([\#8276](matrix-org/matrix-react-sdk#8276)). Fixes element-hq#21731. Contributed by @luixxiul.
* Fixes button labels being collapsed per a character in CJK languages ([\element-hq#8212](matrix-org/matrix-react-sdk#8212)). Fixes element-hq#21287. Contributed by @luixxiul.
* Fix: Remove jittery timeline scrolling after jumping to an event ([\element-hq#8263](matrix-org/matrix-react-sdk#8263)).
* Fix regression of edits showing up in the timeline with hidden events shown ([\element-hq#8260](matrix-org/matrix-react-sdk#8260)). Fixes element-hq#21694.
* Fix reporting events not working ([\element-hq#8257](matrix-org/matrix-react-sdk#8257)). Fixes element-hq#21713.
* Make Jitsi widgets in video rooms immutable ([\element-hq#8244](matrix-org/matrix-react-sdk#8244)). Fixes element-hq#21647.
* Fix: Ensure links to events scroll the correct events into view ([\element-hq#8250](matrix-org/matrix-react-sdk#8250)). Fixes element-hq#19934.
su-ex added a commit to SchildiChat/matrix-react-sdk that referenced this issue Apr 30, 2022
@su-ex
Merge tag 'v3.43.0' into sc
bca1c88 
* Improve performance of switching to rooms with lots of servers and ACLs ([\matrix-org#8347](matrix-org#8347)).
* Avoid a reflow when setting caret position on an empty composer ([\matrix-org#8348](matrix-org#8348)).
* Add message right-click context menu as a labs feature ([\matrix-org#5672](matrix-org#5672)).
* Live location sharing - basic maximised beacon map ([\matrix-org#8310](matrix-org#8310)).
* Live location sharing - render users own beacons in timeline ([\matrix-org#8296](matrix-org#8296)).
* Improve Threads beta around degraded mode ([\matrix-org#8318](matrix-org#8318)).
* Live location sharing -  beacon in timeline happy path ([\matrix-org#8285](matrix-org#8285)).
* Add copy button to View Source screen ([\matrix-org#8278](matrix-org#8278)). Fixes element-hq/element-web#21482. Contributed by @olivialivia.
* Add heart effect ([\matrix-org#6188](matrix-org#6188)). Contributed by @CicadaCinema.
* Update new room icon ([\matrix-org#8239](matrix-org#8239)).
* Fix: "Code formatting button does not escape backticks" ([\matrix-org#8181](matrix-org#8181)). Contributed by @yaya-usman.
* Fix beta indicator dot causing excessive CPU usage ([\matrix-org#8340](matrix-org#8340)). Fixes element-hq/element-web#21793.
* Fix overlapping timestamps on empty messages ([\matrix-org#8205](matrix-org#8205)). Fixes element-hq/element-web#21381. Contributed by @goelesha.
* Fix power selector not showing up in user info when state_default undefined ([\matrix-org#8297](matrix-org#8297)). Fixes element-hq/element-web#21669.
* Avoid looking up settings during timeline rendering ([\matrix-org#8313](matrix-org#8313)). Fixes element-hq/element-web#21740.
* Fix a soft crash with video rooms ([\matrix-org#8333](matrix-org#8333)).
* Fixes call tiles overflow ([\matrix-org#8096](matrix-org#8096)). Fixes element-hq/element-web#20254. Contributed by @luixxiul.
* Fix a bug with emoji autocomplete sorting where adding the final "&matrix-org#58;" would cause the emoji with the typed shortcode to no longer be at the top of the autocomplete list. ([\matrix-org#8086](matrix-org#8086)). Fixes element-hq/element-web#19302. Contributed by @commonlawfeature.
* Fix image preview sizing for edge cases ([\matrix-org#8322](matrix-org#8322)). Fixes element-hq/element-web#20088.
* Refactor SecurityRoomSettingsTab and remove unused state ([\matrix-org#8306](matrix-org#8306)). Fixes matrix-org/element-web-rageshakes#12002.
* Don't show the prompt to enable desktop notifications immediately after registration ([\matrix-org#8274](matrix-org#8274)).
* Stop tracking threads if threads support is disabled ([\matrix-org#8308](matrix-org#8308)). Fixes element-hq/element-web#21766.
* Fix some issues with threads rendering ([\matrix-org#8305](matrix-org#8305)). Fixes element-hq/element-web#21670.
* Fix threads rendering issue in Safari ([\matrix-org#8298](matrix-org#8298)). Fixes element-hq/element-web#21757.
* Fix space panel width change on hovering over space item ([\matrix-org#8299](matrix-org#8299)). Fixes element-hq/element-web#19891.
* Hide the reply in thread button in deployments where beta is forcibly disabled ([\matrix-org#8294](matrix-org#8294)). Fixes element-hq/element-web#21753.
* Prevent soft crash around room list header context menu when space changes ([\matrix-org#8289](matrix-org#8289)). Fixes matrix-org/element-web-rageshakes#11416, matrix-org/element-web-rageshakes#11692, matrix-org/element-web-rageshakes#11739, matrix-org/element-web-rageshakes#11772, matrix-org/element-web-rageshakes#11891 matrix-org/element-web-rageshakes#11858 and matrix-org/element-web-rageshakes#11456.
* When selecting reply in thread on a thread response open existing thread ([\matrix-org#8291](matrix-org#8291)). Fixes element-hq/element-web#21743.
* Handle thread bundled relationships coming from the server via MSC3666 ([\matrix-org#8292](matrix-org#8292)). Fixes element-hq/element-web#21450.
* Fix: Avatar preview does not update when same file is selected repeatedly ([\matrix-org#8288](matrix-org#8288)). Fixes element-hq/element-web#20098.
* Fix a bug where user gets a warning when changing powerlevel from **Admin** to **custom level (100)** ([\matrix-org#8248](matrix-org#8248)). Fixes element-hq/element-web#21682. Contributed by @Jumeb.
* Use a consistent alignment for all text items in a list ([\matrix-org#8276](matrix-org#8276)). Fixes element-hq/element-web#21731. Contributed by @luixxiul.
* Fixes button labels being collapsed per a character in CJK languages ([\matrix-org#8212](matrix-org#8212)). Fixes element-hq/element-web#21287. Contributed by @luixxiul.
* Fix: Remove jittery timeline scrolling after jumping to an event ([\matrix-org#8263](matrix-org#8263)).
* Fix regression of edits showing up in the timeline with hidden events shown ([\matrix-org#8260](matrix-org#8260)). Fixes element-hq/element-web#21694.
* Fix reporting events not working ([\matrix-org#8257](matrix-org#8257)). Fixes element-hq/element-web#21713.
* Make Jitsi widgets in video rooms immutable ([\matrix-org#8244](matrix-org#8244)). Fixes element-hq/element-web#21647.
* Fix: Ensure links to events scroll the correct events into view ([\matrix-org#8250](matrix-org#8250)). Fixes element-hq/element-web#19934.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
O-Frequent Affects or can be seen by most users regularly or impacts most users' first experience S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect X-Needs-Design
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixes button labels being collapsed per a character in CJK languages
2 participants
@dbkr @luixxiul