Make WordPress Core

Opened 4 years ago

Last modified 3 weeks ago

#55492 reopened defect (bug)

`Dismiss Errors` button alignment is not centered in Media Library.

Reported by: iamjaydip's profile iamjaydip Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.9.2
Component: Media Keywords: has-patch has-screenshots
Focuses: css, administration Cc:

Description

When I drag/upload an SVG image in the Media library then it shows a mime types error and the "Dismiss Errors" button is not aligned properly.

Attachments (4)

55492.diff (422 bytes) - added by iamjaydip 4 years ago.
55492.png (238.9 KB) - added by iamjaydip 4 years ago.
Please find the attachment to good understand the issue.
New Note.jpeg (574.9 KB) - added by poojapadamad 7 months ago.
55492.1.diff (395 bytes) - added by sabernhardt 6 months ago.
sets margin: 0 auto to the dismiss button only when it is inside the media frame (adding media to a post)

Download all attachments as: .zip

Change History (11)

@iamjaydip
4 years ago

@iamjaydip
4 years ago

Please find the attachment to good understand the issue.

#1 follow-up: @sabernhardt
4 years ago

  • Component changed from General to Media
  • Focuses css administration added

#2 in reply to: ↑ 1 @vishitshah
4 years ago

  • Resolution set to invalid
  • Status changed from new to closed
Last edited 4 years ago by vishitshah (previous) (diff)

#3 @vishitshah
4 years ago

  • Type changed from enhancement to defect (bug)

.errors.media-uploader-status .upload-dismiss-errors, .errors.media-uploader-status .upload-errors {
display: inline-block;
}

#4 @vishitshah
4 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

#5 @poojapadamad
7 months ago

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/55492/55492.diff

Environment

  • WordPress: 6.9-alpha-60093-src
  • PHP: 8.2.29
  • Server: nginx/1.29.0
  • Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.29)
  • Browser: Chrome 138.0.0.0
  • OS: macOS
  • Theme: Twenty Twenty 2.9
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.0

Actual Results

  1.  ✅Dismiss errors button is aligned in center.

Supplemental Artifacts

Attachment -https://core.trac.wordpress.org/attachment/ticket/55492/New%20Note.jpeg

Last edited 7 months ago by poojapadamad (previous) (diff)

@sabernhardt
6 months ago

sets margin: 0 auto to the dismiss button only when it is inside the media frame (adding media to a post)

#6 @sabernhardt
6 months ago

New Note.jpeg shows that 55492.diff centers the dismiss button on the Media Library page, in Grid mode, where it should not be centered.

Setting display: inline-block on .errors.media-uploader-status .upload-dismiss-errors might be fine, but .errors.media-uploader-status .upload-errors should remain block.

For a simpler change, 55492.1.diff centers only the dismiss button, only in the .media-frame.

#7 @r1k0
3 weeks ago

  • Keywords needs-testing removed

Patch Testing Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/55492/55492.1.diff

Environment

  • WordPress: 7.0-alpha-61215-src
  • PHP: 8.2.29
  • Server: nginx/1.29.4
  • Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
  • Browser: Chrome 144.0.0.0
  • OS: Linux
  • Theme: Twenty Twenty-Five 1.4
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.2.1

Steps taken

  1. On admin dashboard go to Posts > Add Post.
  2. Click the Set Featured Image button on the setting tab on the right.
  3. Ensure you are in Upload files section, and upload/drop an SVG file.
  4. Observe the position of the Dismiss Errors button.
  5. ✅ Patch is solving the problem.

Expected result

  • The dismiss button is centered in .media-frame.

Additional Notes

  • None

Screenshots/Screencast with results

  • Screenshot before:

https://i.ibb.co/TB15b1CN/dismiss-error-btn-before.png

  • Screenshot after:

https://i.ibb.co/C3gW7GcK/dimiss-error-btn-after.png

Last edited 3 weeks ago by r1k0 (previous) (diff)
Note: See TracTickets for help on using tickets.