WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 weeks ago

#41024 closed defect (bug) (worksforme)

File uploader looks misaligned in Mac Chrome

Reported by: Ankit K Gupta Owned by: SergeyBiryukov
Milestone: Priority: normal
Severity: normal Version: 4.8
Component: Plugins Keywords: has-patch has-screenshots close
Focuses: administration Cc:

Description

Plugin/theme file uploader look misaligned in Mac Chrome. Refer attached screen shots.
Browser default uploader text appearing on select file button and it makes text long.
I am not expert in CSS but I noticed if change max-width of form. It looks fine in All Browsers.
Better solution are welcome :)

Attachments (8)

Mac Chrome.jpg (26.8 KB) - added by Ankit K Gupta 3 years ago.
Windows Chrome.jpeg (46.7 KB) - added by Ankit K Gupta 3 years ago.
41024.patch (386 bytes) - added by Ankit K Gupta 3 years ago.
After Fix.jpg (26.2 KB) - added by Ankit K Gupta 3 years ago.
41024.2.patch (381 bytes) - added by gingeds 3 years ago.
CSS Coding Standards fix
MacThemePluginUploader10-25-2020.png (17.1 KB) - added by metalandcoffee 5 weeks ago.
41024-add-plugin-file.gif (5.0 MB) - added by hellofromTonya 5 weeks ago.
Upload plugin (add plugin file) screen on Mac with Chrome: dragging in and out to responsively resize. Result: no misalignment.
41024-add-theme-file.gif (7.4 MB) - added by hellofromTonya 5 weeks ago.
Upload theme (add theme file) screen on Mac with Chrome: dragging in and out to responsively resize. Result: no misalignment.

Change History (17)

@Ankit K Gupta
3 years ago

#1 @Ankit K Gupta
3 years ago

  • Keywords has-patch has-screenshots added

#2 @gingeds
3 years ago

Good work!

I changed it to 400px and attached file above - as WordPress CSS Coding Standards states magic numbers are unlucky.

See: https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#best-practices

Cheers!

Last edited 3 years ago by gingeds (previous) (diff)

@gingeds
3 years ago

CSS Coding Standards fix

This ticket was mentioned in Slack in #core-media by mike. View the logs.


22 months ago

#4 @SergeyBiryukov
4 months ago

  • Milestone changed from Awaiting Review to 5.6
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#5 @metalandcoffee
5 weeks ago

I don't show this as being an issue anymore. The relevant selectors .upload-theme .wp-upload-form, .upload-plugin .wp-upload-form have since been updated to use flexbox so I think this can be closed as fixed.

FYI: I am on Mac OS Catalina using Chrome Version 86.0.4240.111 to view a baseline install of WordPress 5.5.1. See attached screenshot.

What do you think, @SergeyBiryukov?

@hellofromTonya
5 weeks ago

Upload plugin (add plugin file) screen on Mac with Chrome: dragging in and out to responsively resize. Result: no misalignment.

@hellofromTonya
5 weeks ago

Upload theme (add theme file) screen on Mac with Chrome: dragging in and out to responsively resize. Result: no misalignment.

#6 @hellofromTonya
5 weeks ago

I concur with @metalandcoffee. I did not witness an alignment issue either on my Macbook (see uploaded gifs). Tested:

  • Chrome Version 86.0.4240.111 (Official Build) (x86_64)
  • macOS Catalina version 10.15.7
  • Current wordpress-develop master branch, ie version 5.6-beta1-49262-src

This issue appears to be resolved.

#7 @Hareesh Pillai
5 weeks ago

  • Keywords close added

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


2 weeks ago

#9 @hellofromTonya
2 weeks ago

  • Milestone 5.6 deleted
  • Resolution set to worksforme
  • Status changed from reviewing to closed

Agreed during today's scrub to close this ticket as worksforme.

Note: See TracTickets for help on using tickets.