The Wayback Machine - https://web.archive.org/web/20211203225037/https://core.trac.wordpress.org/ticket/52834

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)

@audrasjbCore Committer
9 months ago

German translation i18n issue

@audrasjbCore Committer
9 months ago

Proposal: replace floats with flex layout for better fallback

@audrasjbCore Committer
9 months ago

52834.diff result

#1 @audrasjbCore Committer
9 months ago

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

#2 @ryelleCore Committer
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 @peterwilsonccCore Committer
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 @peterwilsonccCore Committer
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 @peterwilsonccCore Committer
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 @ryelleCore Committer
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

Based on my earlier review this is good to backport.

#8 @peterwilsonccCore Committer
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 @audrasjbCore Committer
8 months ago

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

I can reproduce the issue as well, thanks @mukesh27

#11 @audrasjbCore Committer
8 months ago

  • Keywords dev-reviewed removed

@audrasjbCore Committer
8 months ago

#12 @audrasjbCore Committer
8 months ago

  • Keywords has-patch added; needs-patch removed

#13 @audrasjbCore Committer
8 months ago

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

#14 @ryelleCore Committer
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 @ryelleCore Committer
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 @SergeyBiryukovCore Committer
8 months ago

  • Keywords dev-reviewed added; dev-feedback removed

[50577] looks good to backport.

#17 @ryelleCore Committer
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.