Alignment issue on media-new.php when browse uploader screen is active

[krupajnanda]

While adding any media from browse upload screen, the message it shows when the file is uploaded or not, that isn't aligned properly with the button.

Steps:

1. Goto /wp-admin/media-new.php page.
2. Switch to browse uploader
3. Check here

Please check attachment 1 and 2 for the same.

[krupajnanda]

It should look something like as shown in expected output.png file

[kirasong]

Thanks so much for the report, and sorry it's taken so long for a response.

Because this is an older upload method, I'm lowering the priority on the ticket, but would be happy to merge/commit a fix if it's available.

Related: #41024

[aaroncampbell]

I'm not much of a CSS expert, so I'm sure what the real fix is here. But when playing with this as part of a bug scrub today I did notice that getting rid of the font-size:14px that’s applied to input, select, textarea in wp-admin/css/forms.css seems to line it up right (shrinking the font to 13px in the process for me?).

It’s like the font in the input it affected by that but not the font in the button, but I don't know what other areas of wp-admin this would affect.

[lucagrandicelli]

Hi @krupajnanda, used browser?

[krupajnanda]

Replying to lucagrandicelli:

Hi @krupajnanda, used browser?

This was checked on Chrome, Firefox and Safari browsers for MAC OS

[andraganescu]

CSS fixing the text alignment for the upload input

[andraganescu]

I've added a small patch that should fix the misalignment here

https://core.trac.wordpress.org/attachment/ticket/41648/41648.diff

[krupajnanda]

Replying to andraganescu:

I've added a small patch that should fix the misalignment here

https://core.trac.wordpress.org/attachment/ticket/41648/41648.diff

Thank you

[samful]

This patch was mentioned in Slack and is marked as possible "Blockers For Releases" so I had a look into this using Linux Chromuim and Firefox, and a MacBookPro with lastest MacOS Safari and Chrome. The issue only occurred for me on the Mac.

I believe the code has been changed slightly since this ticket was opened and the current fix didn't work for me, so I used this code:

#html-upload-ui #async-upload{
    font-size: 13px;
}

It will need to go in the src/wp-admin/css/media.min.css for you to test it.

See my Screenshot for a side by side comparison of before and after:

[sabernhardt]

adjusts #async-upload file input's font size to 13px, with or without JavaScript enabled

[sabernhardt]

option with 1em instead of 13px (the paragraph is already set to 13px font size)

[sabernhardt]

In 41648.size-13px.diff​, the CSS selector is changed to #html-upload-ui #async-upload so it affects the file input with or without JavaScript.

Before and after the patch, alignment was fine in Windows browsers (Chrome, Firefox, Edge-Chromium, IE11, Vivaldi). Of course, the patch still needs testing in at least MacOS.

I also get the same results with a value of 1em instead of 13px, so that option is available, too. (If unsure about the 1em option, go with 13px.)

[SergeyBiryukov]

The patch looks simple enough, but I didn't have a chance to test in on a Mac yet, and would like to tackle #41024 at the same time. Moving to 5.6 for now.

[andystitt829]

Mac Safari alignment before patch

[andystitt829]

Mac Safari alignment after patch

[andystitt829]

Tested this on Mac. Alignment before and after the patch looked fine in Firefox and Chrome. In Safari, the alignment looks like it might have a little too much bottom padding. It's the same result both before and after the patch. Not sure if it's worth tweaking or if it looks fine as it is.

[antpb]

Safari after patch (November)

[antpb]

Above is a screenshot from Safari on MacOS. I think it looks pretty good and consistent with what I'm seeing in Firefox and Chrome. Going to commit this for 5.6 Beta 4, and if we think Safari needs further tweaks, we can open a specific ticket on it.

The above is the 1em option. I'm testing with the 13px option to see which has he best experience across all browsers. The 1em looks great in my opinion.

[antpb]

My rule is if it looks identical, go with em :D

This looks good in my testing.

[antpb]

In 49553:

Media: Adjusts alignment of file name text in browser uploader.

Sets a defined size for text alongside the media browser uploader button fixing alignment on popular browsers.

Props krupajnanda, mikeschroder, aaroncampbell, lucagrandicelli, andraganescu, samful, sabernhardt, andystitt829, kburgoine.
Fixes #41648

[antpb]

In 49555:

Media: Removes duplicate alignment fix for browser uploader.

See #41648