Opened 3 years ago
Closed 2 years ago
#55393 closed defect (bug) (fixed)
File name URL overflow the container in the media editor
Reported by: | mitogh | Owned by: | audrasjb |
---|---|---|---|
Milestone: | 6.1 | Priority: | normal |
Severity: | normal | Version: | 5.4 |
Component: | Media | Keywords: | good-first-bug has-patch has-screenshots commit |
Focuses: | ui, css, administration | Cc: |
Description
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.
- Upload the attached image to the media library
- Click on Edit to open the edit media area.
- Observe the result.
Dimensions where the issue is happening: 16843x1417
Attachments (16)
Change History (31)
#1
@
3 years ago
- Focuses css added
- Milestone changed from Awaiting Review to 6.0
- Version changed from 5.9.2 to 5.4
#4
@
3 years ago
@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.
@
2 years ago
using a generic class name for the possibility of reusing it in unrelated admin situations
@
2 years ago
applying break-word
helps on the list view details screen (or "more details" in grid mode)
@
2 years ago
using generic class name for wrapping filename in post media inserter attachment details dialog (Classic Editor)
#6
@
2 years ago
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.
#8
@
2 years ago
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.
This ticket was mentioned in PR #2751 on WordPress/wordpress-develop by rytisder.
2 years ago
#9
Trac ticket: https://core.trac.wordpress.org/ticket/55393
#10
@
2 years ago
- Keywords has-screenshots added
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.
#11
follow-up:
↓ 12
@
2 years ago
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
.
#12
in reply to:
↑ 11
@
2 years ago
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 thanwrap-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.
Issue Reproduction Report
Env
Steps to reproduce
Media > Add New
.Media > Library
.To the right, the "Original image:" link should overflow the container.
Results
Notes
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 thatword-break: break-all
looks cleaner.css
focus for input on preference betweenbreak-word
andbreak-all
.6.0
.