Make WordPress Core

Opened 12 months ago

Closed 8 months ago

Last modified 8 months ago

#56827 closed enhancement (wontfix)

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

Reported by: nlpro's profile nlpro Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.0.2
Component: Login and Registration Keywords: has-testing-info has-screenshots
Focuses: ui, ui-copy Cc:

Description (last modified by sabernhardt)

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)”.

Attachments (4)

706036C8-6147-4798-A36D-588406BB5906.jpeg (166.0 KB) - added by nlpro 12 months ago.
Default Reset Password page in English (United States) language.
50D254EA-45B8-43BB-830E-3F126E993496.jpeg (193.8 KB) - added by nlpro 12 months ago.
After selecting language “Nederlands”.
reset-password-buttons-ltr.html (155.4 KB) - added by sabernhardt 8 months ago.
Buttons in LTR languages: Save Password, Save, Update
reset-password-buttons-rtl.html (51.2 KB) - added by sabernhardt 8 months ago.
Buttons in RTL languages: Save Password, Save, Update

Download all attachments as: .zip

Change History (13)

@nlpro
12 months ago

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

@nlpro
12 months ago

After selecting language “Nederlands”.

#1 @nlpro
12 months ago

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.

#2 @nlpro
12 months ago

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;-)

#3 @nlpro
12 months ago

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)”.

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


12 months ago

#5 @cu121
12 months ago

  • Keywords has-testing-info has-screenshots needs-testing added

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

Last edited 12 months ago by cu121 (previous) (diff)

#6 @sabernhardt
11 months ago

  • Component changed from I18N to Login and Registration
  • Description modified (diff)
  • Focuses ui-copy added
  • Keywords needs-testing removed
  • Summary changed from Alignment issue with Generate Password and Save Password buttons due to l10n on Reset Password page to Alignment issue with Generate Password and Save Password buttons on Reset Password page

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

#7 @kebbet
8 months ago

  • Resolution set to invalid
  • Status changed from new to closed

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.

#8 @sabernhardt
8 months ago

  • Resolution changed from invalid to wontfix
  • Type changed from defect (bug) to enhancement

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
8 months ago

Buttons in LTR languages: Save Password, Save, Update

@sabernhardt
8 months ago

Buttons in RTL languages: Save Password, Save, Update

#9 @sabernhardt
8 months ago

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.

Note: See TracTickets for help on using tickets.