WordPress.org

Make WordPress Core

#52834 closed defect (bug) (fixed)

Reset password screen: improve buttons layout for better i18n

Reported by: audrasjb Owned by: peterwilsoncc
Milestone: 5.7.1 Priority: normal
Severity: normal Version: 5.7
Component: Login and Registration Keywords: has-screenshots fixed-major has-patch commit dev-reviewed
Focuses: ui, css Cc:

Description

Related: #39638

Props to @pixelverbieger for pointing this out.

In some locales, the two buttons position is not ideal. They should ideally be stacked when there is not enough place leave them float.

Attachments (5)

zu-schmal.jpg (136.2 KB) - added by audrasjb 10 months ago.
German translation i18n issue
52834.diff (695 bytes) - added by audrasjb 10 months ago.
Proposal: replace floats with flex layout for better fallback
3b868ae1e879873021c9e68ef0fa4b86.gif (662.7 KB) - added by audrasjb 10 months ago.
52834.diff result
Log-In.png (58.5 KB) - added by mukesh27 10 months ago.
52834.1.diff (337 bytes) - added by audrasjb 10 months ago.

Download all attachments as: .zip

Change History (22)

@audrasjb
10 months ago

German translation i18n issue

@audrasjb
10 months ago

Proposal: replace floats with flex layout for better fallback

@audrasjb
10 months ago

52834.diff result

#1 @audrasjb
10 months ago

  • Keywords has-patch 2nd-opinion has-screenshots added

#2 @ryelle
10 months ago

  • Keywords commit added; 2nd-opinion removed

Tested across a few languages of different lengths, looks good across all.

#3 @grapplerulrich
10 months ago

Thank you @audrasjb for reporting this. I just noticed the same issue.

I hope we can get this in in a minor version.

#4 @peterwilsoncc
10 months ago

  • Milestone changed from Awaiting Review to 5.7.1

I think this would be good to put in the upcoming minor release.

#5 @peterwilsoncc
10 months ago

  • Owner set to peterwilsoncc
  • Resolution set to fixed
  • Status changed from new to closed

In 50569:

Login, Registration: Prevent button misalignment on password reset screen.

Prevent misalignment of "generate password" and "save password" buttons on the password reset screen on narrow screens and in languages requiring longer text than English.

Props audrasjb, grapplerulrich, ryelle.
Fixes #52834.

#6 @peterwilsoncc
10 months ago

  • Keywords fixed-major dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for commit to the 5.7 branch following second a committer's sign-off.

#7 @ryelle
10 months ago

  • Keywords dev-reviewed added; dev-feedback removed

Based on my earlier review this is good to backport.

#8 @peterwilsoncc
10 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 50572:

Login, Registration: Prevent button misalignment on password reset screen.

Prevent misalignment of "generate password" and "save password" buttons on the password reset screen on narrow screens and in languages requiring longer text than English.

Props audrasjb, grapplerulrich, ryelle.
Merges [50569] to the 5.7 branch.
Fixes #52834.

#9 @mukesh27
10 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Login page button issue after removed the below CSS in #50572

.login .button-primary { 
   float: right;
}

I'm using a development version (5.8-alpha-50571).

@mukesh27
10 months ago

#10 @audrasjb
10 months ago

  • Keywords needs-patch added; has-patch commit removed

I can reproduce the issue as well, thanks @mukesh27

#11 @audrasjb
10 months ago

  • Keywords dev-reviewed removed

@audrasjb
10 months ago

#12 @audrasjb
10 months ago

  • Keywords has-patch added; needs-patch removed

#13 @audrasjb
10 months ago

The above patch restore the previous rule and keep the new one used in password reset form.

#14 @ryelle
10 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 50577:

Login, Registration: Prevent button misalignment on login screen.

Replace the float CSS removed in [50569], which is used to align the login & register buttons.

Props mukesh27, audrasjb.
Fixes #52834.

#15 @ryelle
10 months ago

  • Keywords commit dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

Version 0, edited 10 months ago by ryelle (next)

#16 @SergeyBiryukov
10 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50577] looks good to backport.

#17 @ryelle
10 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 50580:

Login, Registration: Prevent button misalignment on login screen.

Replace the CSS removed in [50569], which is used to align the login & register buttons.

Props mukesh27, audrasjb.
Reviewed by SergeyBiryukov.
Merges [50577] to the 5.7 branch.
Fixes #52834.

Note: See TracTickets for help on using tickets.