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.