Make WordPress Core

Opened 9 months ago

Closed 6 months ago

Last modified 6 months ago

#58829 closed defect (bug) (fixed)

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

Reported by: sujichandran14's profile sujichandran14 Owned by: joedolson's profile joedolson
Milestone: 6.4 Priority: normal
Severity: normal Version: 6.2.2
Component: Upload Keywords: has-patch has-testing-info commit
Focuses: Cc:

Description

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.

Attachments (9)

Screenshot media.png (725.7 KB) - added by sujichandran14 9 months ago.
58829.diff (579 bytes) - added by sarath.ar 9 months ago.
58829.2.diff (317 bytes) - added by dkotter 7 months ago.
Screenshot 2023-09-29 at 10.21.55 AM.png (79.7 KB) - added by dkotter 7 months ago.
Screenshot 2023-09-29 at 10.22.05 AM.png (51.4 KB) - added by dkotter 7 months ago.
Screenshot 2023-09-29 at 10.22.14 AM.png (28.7 KB) - added by dkotter 7 months ago.
Screenshot 2023-09-29 at 10.24.51 AM.png (48.8 KB) - added by dkotter 7 months ago.
2023-10-05_20-53-18.png (38.2 KB) - added by oglekler 7 months ago.
Screenshot 2023-10-06 at 12.13.43 AM.png (162.3 KB) - added by huzaifaalmesbah 7 months ago.
Thank you, @oglekler ! I've confirmed that both issues have been resolved after applying your patch.

Download all attachments as: .zip

Change History (22)

@sarath.ar
9 months ago

#1 @NekoJonez
9 months ago

  • Keywords has-patch added

This ticket was mentioned in Slack in #core by sujichandran14. View the logs.


9 months ago

#3 @SergeyBiryukov
9 months ago

  • Milestone changed from Awaiting Review to 6.4

This ticket was mentioned in Slack in #core by nicolefurlan. View the logs.


7 months ago

#5 @joedolson
7 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

#6 @huzaifaalmesbah
7 months ago

I think, we need to fix also this issue on this ticket.
https://i.ibb.co/GVBHd2Y/Screenshot-2023-09-27-at-11-35-45-PM.png

#7 @huzaifaalmesbah
7 months ago

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

https://i.ibb.co/ysP04cQ/Screenshot-2023-09-27-at-11-34-09-PM.png

After Applying Patch

https://i.ibb.co/Bq3nQ4v/Screenshot-2023-09-27-at-11-35-06-PM.png

#8 @nicolefurlan
7 months ago

  • Keywords has-testing-info needs-testing added

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
7 months ago

#9 @dkotter
7 months ago

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.

This ticket was mentioned in PR #5414 on WordPress/wordpress-develop by @oglekler.


7 months ago
#10

Both suggested fixes in one patch

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

@huzaifaalmesbah
7 months ago

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

#11 @joedolson
6 months ago

  • Keywords commit added; needs-testing removed

#12 @joedolson
6 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.