Make WordPress Core

Opened 22 months ago

Last modified 16 months ago

#62513 new defect (bug)

Long first/last names without spaces break mobile view layout

Reported by: sukhendu2002 Owned by:
Priority: low Milestone: Awaiting Review
Component: Users Version:
Severity: minor Keywords: has-screenshots has-patch has-test-info
Cc: Focuses: ui, administration

Description

When a user has a long first name or last name without spaces, the layout in the mobile view of the WordPress site breaks.

Steps to Reproduce:

  • Navigate to Users > Add New in WordPress admin
  • Create a new user with a very long first name or last name without spaces
  • View in mobile layout

Attachments (1)

mobile-long-name-overflow.png (344.4 KB ) - added by sukhendu2002 22 months ago.

Download all attachments as: .zip

Change History (7)

This ticket was mentioned in PR #7867 on WordPress/wordpress-develop by @sukhendu2002.


22 months ago
#1

  • Keywords has-patch added

Fixed the issue where long first/last names without spaces broke the mobile layout by overflowing their containers.

Trac ticket: https://core.trac.wordpress.org/ticket/62513

https://github.com/user-attachments/assets/52605d52-fac1-478b-a36f-a2bae542ed3f

#2 @abcd95
22 months ago

  • Keywords has-testing-info added

Hey @sukhendu2002, Thanks for raising this.

I can confirm the reproduction of this layout issue. Here's the detailed report:

Reproduction Report

Description

The mobile view layout breaks when user names contain long strings without spaces. The text overflows its container and creates horizontal scrolling issues.

Environment

  • WordPress: 6.7.1
  • PHP: 8.1
  • Server: nginx/1.27.2
  • Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
  • Browser: Chrome 131.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.0

Steps to Reproduce

  1. Navigate to Users > Add New
  2. Create user with:
    • First Name: LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    • Last Name: LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
  3. View profile page in mobile viewport (375px width)

Actual Results

✅ Layout breaks in mobile view

Supplemental Artifacts

Screenshot - https://postimg.cc/gx50NyFY

#3 @im3dabasia1
22 months ago

Reproduction Report

Description

This report validates whether the issue can be reproduced.
There is overflow of the text if the first name is long as suggested by @sukhendu2002

Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.25
  • Server: nginx/1.27.2
  • Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
  • Browser: Chrome 129.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.0
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1. ✅ Error condition occurs (reproduced).

Additional Notes

  • Any additional details worth mentioning.

Supplemental Artifacts

https://postimg.cc/ZvH7H6HT
https://postimg.cc/bZwJm8y8

#4 @im3dabasia1
22 months ago

## Test Report
### Description
This report validates whether the indicated patch works as expected.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/7867.diff

### Environment

  • WordPress: 6.8-alpha-59274-src
  • PHP: 8.2.25
  • Server: nginx/1.27.2
  • Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
  • Browser: Chrome 129.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty-Five 1.0
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

### Actual Results

  1. ✅ Issue resolved with patch.

### Additional Notes

  • Any additional details worth mentioning.

### Supplemental Artifacts
https://postimg.cc/N9cQcYVL
https://postimg.cc/JD5M7vVx

Version 0, edited 22 months ago by im3dabasia1 (next)

#5 @desrosj
22 months ago

  • Focuses administration added; css removed
  • Priority normallow

#6 @wordpressdotorg
16 months ago

  • Keywords has-test-info added; has-testing-info removed
Note: See TracTickets for help on using tickets.