Miss alignment of "Copied!" message when clicking "Copy URL to clipboard" after uploading a media item

[sujichandran14]

In the media section, once after uploading a new media file, when clicking "Copy URL to clipboard", the message "Copied!" displayed is misaligned.

Steps to reproduce:

1. Select the media library
2. Upload new media from "Add New"
3. After uploading, select the "Copy URL to clipboard" from the uploaded media file displayed.
4. The "Copied!" message displayed is misaligned.

[huzaifaalmesbah]

I think, we need to fix also this issue on this ticket.

[huzaifaalmesbah]

Test Report

Environment

OS: macOS m1
Web Server: nginx/1.25.0
PHP: 8.1.21
WordPress: 6.4-beta1-56730-src
Browser: Chrome 116.0.5845.187
Theme: Twenty Eleven
Active Plugins: No plugins activated.

Before Applying Patch

After Applying Patch

[nicolefurlan]

During our bug scrub today, @joemcgill mentioned that we should make sure the proposed CSS change isn't too broad, which could lead to other side-effects.

[dkotter]

Tested this out today and seems to work fine. I do agree though with @joemcgill that the selector we're changing here is fairly broad and as such, could impact other areas. I did look into when this code was introduced (#51754) and from looking at that, seems fairly safe to modify the CSS as it was introduced as part of the copy to clipboard functionality (and thus I'm assuming it's scoped to that).

All that said, we already have some CSS that is scoped directly to the copy to clipboard container so feels safest to me to make changes there instead.

I've attached a patch above that changes from modifying the .edit-attachment container and instead modifies the .copy-to-clipboard-container container. We add display: flex there, which in essence is the same as what the previous patch was doing (it removed the display: block property and in doing, it falls back to display: flex).

I've tested on various breakpoints and on RTL and all seems fine.

Both suggested fixes in one patch

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

[huzaifaalmesbah]

Thank you, @oglekler ! I've confirmed that both issues have been resolved after applying your patch.

[joedolson]

In 56801:

Upload: Fix misalignment of 'Copied' message.

Add display: flex to .copy-to-clipboard-container to fix alignment of elements within the container.

Props sujichandran14, oglekler, sarathar, huzaifaalmesbah, nicolefurlan, joemcgill, dkotter.
Fixes #58829.

In r56801