File name URL overflow the container in the media editor

[mitogh]

When the filename is large the container where the link of the filename is presented overflow the container in the Edit Media area.

Steps to replicate.

1. Upload the attached image to the media library
2. Click on Edit to open the edit media area.
3. Observe the result.

Dimensions where the issue is happening: 16843x1417

[costdev]

Issue Reproduction Report

Env

• Web Server: Apache (Linux)
• WordPress: 5.9.2
• Browser: Firefox 98.0.1
• OS: Windows 10
• Theme: TT1 Blocks
• Plugins: None activated.

Steps to reproduce

1. Navigate to Media > Add New.
2. Upload a large image with a long file name.
3. Navigate to Media > Library.
4. Click the "List Mode" icon.
5. Click the "Edit" link for the image you uploaded.

To the right, the "Original image:" link should overflow the container.

Results

1. Issue reproduced in Firefox. ✅
2. Could not reproduce in Chrome (incl. Edge, Brave). ❌

Notes

1. Introduced in 47202.
2. word-break: break-word is used on the bolded "File name:" text above the link. This also works when applied to the "Original image:" link, however I personally think that word-break: break-all looks cleaner.
3. Adding css focus for input on preference between break-word and break-all.
4. 47202 introduced this link in the three locations below. The patch should be tested against all three of these.
   • wp-includes/media-template.php:442.
   • wp-includes/media-template.php:665.
   • wp-admin/includes/media.php:3485 - This is the one reported in this ticket.
5. Milestoning for 6.0.

[kapilpaul]

Able to reproduce this issue in chrome

[alamgircsebd]

Created patch

[kapilpaul]

comparison between break-all vs break-word

[kapilpaul]

comparison between break-all vs break-word

[kapilpaul]

@costdev I have added a image for break-all vs break-word

break-word looks much cleaner to me.

The “word-break: break-all;” will break the word at any character so the result is to difficulty in reading whereas “word-wrap: break-word;” will split word without making the word not break in the middle and wrap it into next line.

[sabernhardt]

adding a container to apply this style to original filenames within modal dialogs

[sabernhardt]

using a generic class name for the possibility of reusing it in unrelated admin situations

[sabernhardt]

applying break-word helps on the list view details screen (or "more details" in grid mode)

[sabernhardt]

using generic class name for grid view details dialog

[sabernhardt]

using generic class name for wrapping filename in post media inserter attachment details dialog (Classic Editor)

[sabernhardt]

File names may need to wrap within the details dialogs, too, so I uploaded two options to consider more thorough approaches.

If the simpler approach is preferable, the same change was also suggested on #55819, which has good testing instructions.

[peterwilsoncc]

#55819 was marked as a duplicate.

[peterwilsoncc]

Additional props

@anantajitjg reported this issue on the duplicate ticket.

@afercia assisted with testing.

Committers: As the ticket was closed as a duplicate, please ensure these props are given when committing on this ticket.

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

[circlecube]

Issue currently exists - before applying 55393.generic.diff

[circlecube]

Issue fixed after applying 55393.generic.diff

[circlecube]

Tested first that I saw the issue in trunk, then tested 55393.generic.diff and confirmed that it fixes the issue. Nice job! Before and after screenshots attached above.

[SergeyBiryukov]

If going with 55393.generic.diff​, could we use word-wrap-break-word as the class name, just to match the CSS rule? I think that would be easier to remember than wrap-break-word.

[rafiahmedd]

Replying to SergeyBiryukov:

If going with 55393.generic.diff​, could we use word-wrap-break-word as the class name, just to match the CSS rule? I think that would be easier to remember than wrap-break-word.

Yes, I think we should use word-wrap-break-word as the class name. It will be easy to understand its use case. Also, other developers can easily guess it.

[sabernhardt]

updating generic class name

[audrasjb]

Self-assigning for testing/review.

[audrasjb]

Before patch

[audrasjb]

After patch

[audrasjb]

Looks great to me. Marking for commit.

[audrasjb]

In 53777:

Media: Prevent URLs from overflowing their container in the media editor.

This changeset also introduces the .word-wrap-break-word class which can be used to apply word-wrap: break-word to admin elements when needed.

Props mitogh, costdev, kapilpaul, alamgircsebd, sabernhardt, anantajitjg, afercia, circlecube, SergeyBiryukov, rafiahmedd, audrasjb.
Fixes #55393.