Long user display names overflow container on Edit Media screen

[sainathpoojary]

When a user has a very long display name with no spaces (e.g. ThisIsAReallyLongDisplayNameWithNoBreaksWhatsoever), it causes layout overflow on the Edit Media screen (wp-admin/post.php?post=ID&action=edit for media attachments).

Steps to Reproduce

1. Create a user with a very long display name (no spaces or breakable characters), e.g.: ThisDisplayNameIsUnreasonablyLongAndBreaksTheLayoutOfEditMediaScreen
2. Set "Display name publicly as" to the long name.
3. Log in as that user.
4. Navigate to "Media" → "Add New" and upload a media file.
5. Click "Edit" on the uploaded media item to open the Edit Media screen.
6. Observe that the "Uploaded by" field overflows or breaks the layout due to the long display name.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.4
• Database: mysqli (Server: 8.4.4 / Client: mysqlnd 8.2.28)
• Browser: Chrome 135.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.1
• MU Plugins: None activated
• Plugins: Test Reports 1.2.0

Screenshot

Fixes layout overflow on the Edit Media screen when a user has an excessively long display name. Applies word-break: break-all; to ensure proper wrapping in the “Uploaded by” section.

Before:

After:

Trac ticket: #63243

Thanks for the patch.
I'd suggest to apply this CSS rule to the container .misc-pub-section misc-pub-uploadedby instead of the link.

[audrasjb]

Thanks for the ticket and patch. I suggested some changes in the PR.

[sainathpoojary]

Hi @audrasjb,

I’ve applied the CSS rule to .misc-pub-section .misc-pub-uploadedby instead. When you have a moment, I’d appreciate it if you could take a look.

Thanks again for the review!

[sabernhardt]

You made the requested changes, but using the word-wrap-break-word class instead is another possibility:
<div class="misc-pub-section misc-pub-uploadedby word-wrap-break-word">

[renishsurani]

Test result screenshot

[renishsurani]

Test Report

Patch tested: https://core.trac.wordpress.org/ticket/63243

Test Environment [Playground]

• WordPress: 6.9-alpha-20250408.024349
• PHP: 7.4.31-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 135.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.1
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

The "Uploaded by" field overflows text was looks fixed and displayed as expected.

Test result Screenshot - https://core.trac.wordpress.org/attachment/ticket/63243/image%20(2).png

[sainathpoojary]

Thanks, @sabernhardt, for the feedback. Using the predefined word-wrap-break-word class does seem like a better approach. Should we also make misc-pub-filename consistent and apply word-wrap-break-word to it as well? If so, should we also remove the misc-pub-filename class name from this ​section?

[sabernhardt]

Should we also make misc-pub-filename consistent and apply word-wrap-break-word to it as well?

In #55393, I apparently chose not to add the new class to the filename's element, which already wrapped the overflow with the misc-pub-filename class. If changing that is desirable, however, it would belong on a separate ticket (as an enhancement).

[SirLouen]

#63260 was marked as a duplicate.

[SirLouen]

@sainathpoojary I sent you ​a review of the code, I believe that just with what @sabernhardt proposed is enough to sort this issue and move it over to review.

[SirLouen]

@audrasjb everything ready for review.
I think this can go easily into 6.8.1

[audrasjb]

Given this issue wasn't introduced in 6.8 cycle, the better we can do is to include this fix for 6.8.3 or 6.8.4.
6.8.2 will most probably be reserved for urgent bugfixes directly related to 6.8/6.8.1.
Keeping it in 6.9 for now.

## Test Report

Patch tested: https://core.trac.wordpress.org/ticket/63243

### Environment

• OS: macOS 15.5
• Web Server: nginx/1.27.5
• PHP: 8.2.28
• WordPress: 6.9-alpha-60093-src
• Browser: Chrome 136
• Theme: Twenty Twenty-Five

### Actual Results

• Attachment detail: Long username is correctly wrapped ✅
• Media Library (grid view): Long username is correctly wrapped ✅
• Edit Media: Long username is not wrapped ❌

### Screenshots

#### Attachment detail ✅

#### Media Library(grid view) ✅

#### Edit Media ❌

## Test Report

Patch tested: https://core.trac.wordpress.org/ticket/63243

### Environment

• OS: macOS 15.5
• Web Server: nginx/1.27.5
• PHP: 8.2.28
• WordPress: 6.9-alpha-60093-src
• Browser: Chrome 136
• Theme: Twenty Twenty-Five

### Actual Results

• Attachment detail: Long username is correctly wrapped ✅
• Media Library (grid view): Long username is correctly wrapped ✅
• Edit Media: Long username is not wrapped ❌

### Screenshots

#### Attachment detail ✅

#### Media Library (grid view) ✅

#### Edit Media ❌

## Test Report

Patch tested: https://core.trac.wordpress.org/ticket/63243

### Environment

• OS: macOS 15.5
• Web Server: nginx/1.27.5
• PHP: 8.2.28
• WordPress: 6.9-alpha-60093-src
• Browser: Chrome 136
• Theme: Twenty Twenty-Five

### Actual Results

• Attachment detail: Long username is correctly wrapped ✅
• Media Library (grid view): Long username is correctly wrapped ✅
• Edit Media: Long username is not wrapped ✅

### Steps to validate the fix

Add this CSS rule in /wp-admin/css/common.css.

.misc-pub-section {
	padding: 6px 10px 8px;
	word-wrap: break-all;
}

### Screenshots

#### Attachment detail

#### Media Library (grid view)

#### Edit Media

[valentingrenier]

Sorry for spamming, first contributions 😁

Only the last comment should be taken into consideration.

[SirLouen]

@valentingrenier to avoid this my recommendation is never using Github for test reporting but using Trac. Have GH used exclusively for code reviews.

Also, yesterday we were discussing this in dev-chat, what has motivated you to test a patch that doesn't have a needs-testing keyword?

Replying to audrasjb:

Given this issue wasn't introduced in 6.8 cycle, the better we can do is to include this fix for 6.8.3 or 6.8.4.
6.8.2 will most probably be reserved for urgent bugfixes directly related to 6.8/6.8.1.
Keeping it in 6.9 for now.

Wondering how you are going to remember this when the time comes 🤔

Also why 6.8.3 has not been already opened?

[valentingrenier]

A list of needs testing tickets have been shared during the contributors day by @audrasjb. We were not asked to look at dev-chat before, but I'll have a look the next times.

[SirLouen]

Replying to valentingrenier:

A list of needs testing tickets have been shared during the contributors day by @audrasjb. We were not asked to look at dev-chat before, but I'll have a look the next times.

Ok np, I was just surveying.

Maybe you could be interested in our patch-testing-scrub every Monday @ 5PM CET (Slack #core-test channel)

[audrasjb]

Replying to SirLouen:

Also why 6.8.3 has not been already opened?

It has been decided a few weeks ago to only open the next milestone and not the other following ones.

[audrasjb]

In 60266:

Media: Fix overflow of long user display names on Edit Media screen.

This changeset resolves an issue where long usernames in the media uploader modal would overflow their container. By adding the dedicated word-wrap-break-word class, usernames now properly break into multiple lines.

Follow-up to [59834], [59835].

Props sainathpoojary, audrasjb, sabernhardt, renishsurani, SirLouen, valentingrenier.
Fixes #63243.