WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 8 months ago

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

Download all attachments as: .zip

Change History (22)

@audrasjb
9 months ago

German translation i18n issue

@audrasjb
9 months ago

Proposal: replace floats with flex layout for better fallback

@audrasjb
9 months ago

52834.diff result

#1 @audrasjb
9 months ago

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

#2 @ryelle
9 months ago

  • Keywords commit added; 2nd-opinion removed

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

#3 @grapplerulrich
9 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
9 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
8 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
8 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
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

Based on my earlier review this is good to backport.

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

#10 @audrasjb
8 months ago

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

I can reproduce the issue as well, thanks @mukesh27

#11 @audrasjb
8 months ago

  • Keywords dev-reviewed removed

@audrasjb
8 months ago

#12 @audrasjb
8 months ago

  • Keywords has-patch added; needs-patch removed

#13 @audrasjb
8 months ago

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

#14 @ryelle
8 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
8 months 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 8 months ago by ryelle (previous) (diff)

#16 @SergeyBiryukov
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50577] looks good to backport.

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