WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 2 months ago

Last modified 2 months ago

#37617 closed defect (bug) (fixed)

Username text overflows in error message box on login screen.

Reported by: soniakash Owned by: hellofromTonya
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Login and Registration Keywords: has-patch has-screenshots commit
Focuses: ui, administration Cc:

Description

If we enter correct long username in wp-admin login page and wrong password then it show error message and it goes out of the message box.

Attachments (10)

login_error.patch (347 bytes) - added by soniakash 5 years ago.
password_error.png (32.9 KB) - added by soniakash 5 years ago.
Capture d’écran 2021-09-26 à 17.54.45.png (124.5 KB) - added by audrasjb 4 months ago.
Before patch
37617.1.diff (337 bytes) - added by audrasjb 4 months ago.
Login and Registration: Ensure that long username or email doesn’t break the login message interface.
Capture d’écran 2021-09-26 à 17.54.16.png (116.3 KB) - added by audrasjb 4 months ago.
After patch
Capture d’écran 2021-09-26 à 17.55.22.png (117.3 KB) - added by audrasjb 4 months ago.
After patch (2)
37617.2.diff (338 bytes) - added by audrasjb 4 months ago.
Login and Registration: Ensure that long username or email doesn’t break the login message interface.
Capture d’écran 2021-09-26 à 18.06.20.png (105.7 KB) - added by audrasjb 4 months ago.
It's slightly better with break-word (37617.2.diff)
37617.3.diff (468 bytes) - added by hellofromTonya 2 months ago.
Switch to word-wrap for better cross browser support. Includes changing #backtoblog for consistency.
37617-3-multiple-browsers.png (805.7 KB) - added by hellofromTonya 2 months ago.
With 37617.3.diff applied, works in Chrome, Firefox, Safari, and Edge ✅

Download all attachments as: .zip

Change History (21)

#1 @Presskopp
5 years ago

  • Keywords has-patch added

#2 @ocean90
5 years ago

  • Focuses ui added
  • Version trunk deleted

#4 @desrosj
3 years ago

  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to Future Release

I am able to reproduce this in the current version of WordPress. login_error.patch does not fix the issue for me, though.

@audrasjb
4 months ago

Login and Registration: Ensure that long username or email doesn’t break the login message interface.

#5 @audrasjb
4 months ago

Looks like word-break: break-all; is not ideal since it breaks other words.
Let's refresh the patch using break-word :)

@audrasjb
4 months ago

Login and Registration: Ensure that long username or email doesn’t break the login message interface.

@audrasjb
4 months ago

It's slightly better with break-word (37617.2.diff)

#6 @audrasjb
4 months ago

  • Keywords has-screenshots added; needs-refresh removed
  • Milestone changed from Future Release to 5.9

Looks like we're good to go.

Moving for 5.9 consideration.

#7 @sabernhardt
3 months ago

The word-break: break-word styling works for me in modern Windows 10 browsers, as it does for the backtoblog link (ticket:52776#comment:8).

However, MDN Web Docs note that this value is deprecated for word-break. Using word-wrap: break-word also works for me in modern Windows 10 browsers (plus Internet Explorer 11). If we switch to word-wrap, the backtoblog link should have the same.

@hellofromTonya
2 months ago

Switch to word-wrap for better cross browser support. Includes changing #backtoblog for consistency.

@hellofromTonya
2 months ago

With 37617.3.diff applied, works in Chrome, Firefox, Safari, and Edge ✅

#8 @hellofromTonya
2 months ago

  • Keywords commit added

Per @sabernhardt suggestions, 37617.3.diff switches to word-wrap: break-word for better cross-browser support and to avoid the deprecation. For consistency, changes #backtoblog to match. Marking for commit.

#9 @hellofromTonya
2 months ago

  • Owner set to hellofromTonya
  • Status changed from new to reviewing

Preparing commit.

#10 @hellofromTonya
2 months ago

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

In 52174:

Login and Registration: Wrap long usernames in login error message.

Adds word-wrap: break-word to wrap long usernames in the login's error message. Using word-wrap instead of word-break for better cross-browser support and to avoid the deprecation (see Ref below).

For consistency, also changes #backtoblog.

Ref:

Follow-up to [51108].

Props soniakash, audrasjb, sabernhardt, hellofromTonya, desrosj, ocean90.
Fixes #37617.

#11 @hellofromTonya
2 months ago

Thank you everyone for contributing! The fix has been committed and will ship with 5.9.

Note: See TracTickets for help on using tickets.