Make WordPress Core

Opened 6 months ago

Last modified 3 months ago

#59939 new defect (bug)

Media: "Copy URL" tooltip text may wrap

Reported by: wildworks's profile wildworks Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.5
Component: Media Keywords: has-patch
Focuses: Cc:

Description

In the media list view, clicking the "hoge" action link displays the tooltip text "Copied!".

In certain languages, perhaps non-Latin languages, this text may wrap.

Text wrapping looks unnatural. To use an English analogy, imagine that the text wraps like this:

Co
pied!

This text will be very short in any language, so you might want to apply white-space: nowrap.

Attachments (15)

copy-url-tip.png (82.5 KB) - added by wildworks 6 months ago.
Text wrapping varies by language
attachment-details-dialog.png (33.5 KB) - added by wildworks 5 months ago.
Attachment Details Dialog
attachment-details-mobile.png (23.3 KB) - added by wildworks 5 months ago.
Attachment Details Dialog (Mobile)
edit-media.png (43.9 KB) - added by wildworks 5 months ago.
Edit Media Sidebar
edit-media-mobile.png (25.0 KB) - added by wildworks 5 months ago.
Edit Media Sidebar (Mobile)
media-list.png (34.6 KB) - added by wildworks 5 months ago.
Media Library (List View)
media-list-mobile.png (27.5 KB) - added by wildworks 5 months ago.
Media Library (List View, Mobile)
upload-new-media.png (39.3 KB) - added by wildworks 5 months ago.
Upload New Media
upload-new-media-mobile.png (30.5 KB) - added by wildworks 5 months ago.
Upload New Media (Mobile)
policy-guide.png (25.5 KB) - added by wildworks 5 months ago.
Policy Guide Tab in the Privacy Page
policy-guide-mobile.png (22.2 KB) - added by wildworks 5 months ago.
Policy Guide Tab in the Privacy Page (Mobile)
site-info.png (45.1 KB) - added by wildworks 5 months ago.
Info Tab in the Site Health Page
site-info-mobile.png (56.0 KB) - added by wildworks 5 months ago.
Info Tab in the Site Health Page (Mobile)
patch.diff (380 bytes) - added by wildworks 3 months ago.
Differences in the tooltip before and after applying the patch
Differences in the tooltip before and after applying the patch.png (23.0 KB) - added by wildworks 3 months ago.
Differences in the tooltip before and after applying the patch

Download all attachments as: .zip

Change History (21)

@wildworks
6 months ago

Text wrapping varies by language

#1 @jorbin
6 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from trunk to 5.5

Related: #54426 #48463 [52842] [48232]

It likely makes sense to look at all the places Copied! is diplayed, not just in the media list table.

Adjusting version to 5.5 which is when this was first added.

Moving to Future Release until there is some traction.

#2 @wildworks
5 months ago

I searched the entire code with Copied! and took screenshots of all copy actions.

In each image, I compare how it looks in English and Japanese. Here's what I noticed in the screenshot:

  • Attachment Details Dialog: That's not a problem, as the text wraps properly.
  • Edit Media Sidebar: Text doesn't wrap, so it may look cramped in some languages.
  • Media Library (List View): Tooltip text wraps unnaturally in Japanese
  • Upload New Media: In mobile viewport, wrapped text overlaps in Japanese.
  • Policy Guide Tab in the Privacy Page: Although there is no space between the copy text and the button on mobile, the text does not wrap unnaturally.
  • Info Tab in the Site Health Page: Text doesn't wrap, so it may look cramped in some languages.

@wildworks
5 months ago

Attachment Details Dialog

@wildworks
5 months ago

Attachment Details Dialog (Mobile)

@wildworks
5 months ago

Edit Media Sidebar

@wildworks
5 months ago

Edit Media Sidebar (Mobile)

@wildworks
5 months ago

Media Library (List View)

@wildworks
5 months ago

Media Library (List View, Mobile)

@wildworks
5 months ago

Upload New Media

@wildworks
5 months ago

Upload New Media (Mobile)

@wildworks
5 months ago

Policy Guide Tab in the Privacy Page

@wildworks
5 months ago

Policy Guide Tab in the Privacy Page (Mobile)

@wildworks
5 months ago

Info Tab in the Site Health Page

@wildworks
5 months ago

Info Tab in the Site Health Page (Mobile)

#3 @wildworks
5 months ago

I think multiple patches are needed to resolve all of these issues.

In my opinion, the problem can be solved by applying white-space: nowrap; for tooltips, and by applying grid layout and flex-wrap: wrap; for other problems.

@wildworks
3 months ago

Differences in the tooltip before and after applying the patch

@wildworks
3 months ago

Differences in the tooltip before and after applying the patch

#4 @wildworks
3 months ago

I have attached a patch to this ticket to fix the issue with tooltips. This patch applies white-space: nowrap to the tooltip, but another approach is to use word-break: keep-all. However, WordPress core does not use "word-break: keep-all" at all, so I avoided this approach.

#5 @wildworks
3 months ago

  • Keywords has-patch added; needs-patch removed

#6 @huzaifaalmesbah
3 months ago

Thanks for adding patch @wildworks I tested your patch patch.diff

Screenshots

Before Apply Patch After Apply Patch ✅
https://i.ibb.co/G3ZnTFb/Huzaifa-20240225182059.png https://i.ibb.co/RBLq35B/Huzaifa-20240225182206.png
Note: See TracTickets for help on using tickets.