Alignment issue with Generate Password and Save Password buttons on Reset Password page

[nlpro]

Prerequisites:

• The initial language used is “English (United States)”.
• Make sure to have other language(s) pre installed (like Nederlands (=Dutch)).

To reproduce the issue follow the steps below (first scenario):

1. Navigate to the site admin login page (wp-login.php or wp-admin).
2. Click on the “Lost your password?” link.
3. Enter an existing username or its associated email address and click on the “Get New Password” button.
4. Now log into the email account of that user, open the “Password Reset” email received and click on the confirmation link.
5. Notice the “Generate Password” and “Save Password” buttons which are correctly aligned horizontally.
6. Select a different language, like “Nederlands” at the bottom of the page and click on the Change button.
7. Notice the 2 earlier mentioned buttons are now stacked or aligned vertically. Yuk, makes me want to puke!

Second scenario:
Simply making use of the browser zoom in/out functionality will very quickly result in the same vertically aligned buttons. This reproduces even in language “English (United States)”.

[nlpro]

Default Reset Password page in English (United States) language.

[nlpro]

After selecting language “Nederlands”.

[nlpro]

2nd scenario:

Simply choosing a smaller or bigger font size in the browser will very quickly result in the same vertically aligned buttons. This reproduces even in language “English (United States)”.

End of description for this ticket.

[nlpro]

IMHO the simplest solution is to change the long “Generate Password” label into a shorter “Generate”. We know we are on the “Reset Password” page, so why repeat the “Password” word ? The same applies for the “Save Password” button. Just using a “Generate” and “Save” button will probably go a long way in solving this issue.

One complication. I noticed the “Generate Password” string is also used in the “Add New User” page. For the same reason we can also use the shorter “Generate” label there. This way the number of WordPress translatable strings remains unchanged.

Interested in any other thoughts;-)

[nlpro]

Correction 2nd scenario:

Simply making use of the browser zoom in/out functionality will very quickly result in the same vertically aligned buttons. This reproduces even in language “English (United States)”.

[cu121]

Thank you @nlpro, for the report! I’m applying some keywords to help ensure this ticket can move forward.

[sabernhardt]

For the English scenario, I needed to change the font from Segoe UI to Roboto, but then the buttons stacked at 175% zoom.

[kebbet]

This is the result of #52834

So it’s designed like this by intention. Suggestion: close this ticket as wontfix and set version to 5.7.

[sabernhardt]

I changed the type and resolution to reflect that #52834 already found one way to fix the original problem. However, I'm not ready to remove the milestone because there might be a way to improve this.

I would prefer to keep "Generate Password" intact, though reusing the "Save" string could be clear enough for the primary button. "Update" was another suggestion on ticket:39638#comment:26 (where it was not selected).

The container also uses CSS flex without the gap property. Adding it would mean that the buttons would stack more often, but they would not touch.

[sabernhardt]

Buttons in LTR languages: Save Password, Save, Update

[sabernhardt]

Buttons in RTL languages: Save Password, Save, Update

[sabernhardt]

I checked the button text in different languages a few days ago, so I should share :)

Shortening the text would make it wrap to the next line less often, but it still can happen. It especially occurs at higher zoom levels.

To be clear, I do not mind the Save Password button wrapping underneath the Generate Password button (on the same side). I think it's better than appearing below the other button on the opposite side.