Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52834 closed defect (bug) (fixed)

Reset password screen: improve buttons layout for better i18n

Reported by: audrasjb's profile audrasjb Owned by: peterwilsoncc's profile 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 3 years ago.
German translation i18n issue
52834.diff (695 bytes) - added by audrasjb 3 years ago.
Proposal: replace floats with flex layout for better fallback
3b868ae1e879873021c9e68ef0fa4b86.gif (662.7 KB) - added by audrasjb 3 years ago.
52834.diff result
Log-In.png (58.5 KB) - added by mukesh27 3 years ago.
52834.1.diff (337 bytes) - added by audrasjb 3 years ago.

Download all attachments as: .zip

Change History (22)

@audrasjb
3 years ago

German translation i18n issue

@audrasjb
3 years ago

Proposal: replace floats with flex layout for better fallback

@audrasjb
3 years ago

52834.diff result

#1 @audrasjb
3 years ago

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

#2 @ryelle
3 years ago

  • Keywords commit added; 2nd-opinion removed

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

#3 @grapplerulrich
3 years 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
3 years 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
3 years 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
3 years 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
3 years ago

  • Keywords dev-reviewed added; dev-feedback removed

Based on my earlier review this is good to backport.

#8 @peterwilsoncc
3 years 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
3 years 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
3 years ago

#10 @audrasjb
3 years ago

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

I can reproduce the issue as well, thanks @mukesh27

#11 @audrasjb
3 years ago

  • Keywords dev-reviewed removed

@audrasjb
3 years ago

#12 @audrasjb
3 years ago

  • Keywords has-patch added; needs-patch removed

#13 @audrasjb
3 years ago

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

#14 @ryelle
3 years 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
3 years ago

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

Thanks for catching that @mukesh27!

Reopening for backport.

Last edited 3 years ago by ryelle (previous) (diff)

#16 @SergeyBiryukov
3 years ago

  • Keywords dev-reviewed added; dev-feedback removed

[50577] looks good to backport.

#17 @ryelle
3 years 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.