Media: "Copy URL" tooltip text may wrap

[wildworks]

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.

[wildworks]

Text wrapping varies by language

[jorbin]

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.

[wildworks]

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]

Attachment Details Dialog

[wildworks]

Attachment Details Dialog (Mobile)

[wildworks]

Edit Media Sidebar

[wildworks]

Edit Media Sidebar (Mobile)

[wildworks]

Media Library (List View)

[wildworks]

Media Library (List View, Mobile)

[wildworks]

Upload New Media

[wildworks]

Upload New Media (Mobile)

[wildworks]

Policy Guide Tab in the Privacy Page

[wildworks]

Policy Guide Tab in the Privacy Page (Mobile)

[wildworks]

Info Tab in the Site Health Page

[wildworks]

Info Tab in the Site Health Page (Mobile)

[wildworks]

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]

Differences in the tooltip before and after applying the patch

[wildworks]

Differences in the tooltip before and after applying the patch

[wildworks]

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.

[huzaifaalmesbah]

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

Screenshots

Before Apply Patch	After Apply Patch ✅