Make WordPress Core

Opened 15 months ago

Last modified 9 months ago

#62513 new defect (bug)

Long first/last names without spaces break mobile view layout

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

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 15 months ago.

Download all attachments as: .zip

Change History (7)

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


15 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
15 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
15 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
15 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 15 months ago by im3dabasia1 (next)

#5 @desrosj
15 months ago

  • Focuses administration added; css removed
  • Priority changed from normal to low

#6 @wordpressdotorg
9 months ago

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