Stack the Switch to draft and Move to Trash buttons vertically. #51892
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
afercia
added
[Type] Bug
|
I'd recommend to consider this for inclusion in WP 6.3, to avoid to shipt an UI that looks broken in many languages other than English. |
afercia
force-pushed
the
fix/switch-to-draft-trash-buttons-text-overflow
branch
from
6e69890
to
a0cf006
Compare
|
Size Change: -16 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
With a flex container we should be able to let it wrap so that if things fit it renders in a single line, and if they don't, it stacks. |
Good idea. That works well in this reduced codepen example. |
I'm not sure it can work well. There's always the chance the buttons will have different widths, because only one of the buttons has some longer text. Can't think of a way to address this. See forked codepen at https://codepen.io/afercia/pen/xxQrEXb?editors=1100 Screenshot: 
If there is a way to address this (I doubt it) I'll gladly defer to someone else with some more advanced CSS knowledge. Cc @jasmussen |
I don't think that's a big problem? There's probably a way to do this keeping the |
|
Closing as the alternative PR (#52249) was merged. I don't think the mixed button widths are a big problem, and something we can explore separately if the need arises. |
tellthemachines
removed
the
Backport to WP 6.7 Beta/RC
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #51451
What?
Any design needs to account for longer strings when translated in other languages. Typically, English has pretty short words compared to other languages. It is paramount to design taking into account other languags.
The new position of the 'Switch to Draft' and 'Move to Trash' buttons didn't take into account longer translations. Since the two buttons are now stacked horizontally. In most western languages the buttons text oferflows and in some cases it is even cut-off screen.
Why?
Test overflows or even cut-off screen in most languages other than English.
How?
Stack the two buttons vertically instead.
Testing Instructions
Before:
Example in German:
Example in German after this change:
Testing Instructions for Keyboard
Screenshots or screencast