WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 8 weeks ago

#41648 reviewing defect (bug)

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

Reported by: krupajnanda Owned by: SergeyBiryukov
Milestone: 5.5 Priority: low
Severity: minor Version: 4.8.1
Component: Media Keywords: good-first-bug has-patch needs-refresh needs-testing
Focuses: ui, css, administration Cc:

Description

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.

Attachments (5)

browser uploader - When file is not attached.png (25.2 KB) - added by krupajnanda 3 years ago.
browser uploader - When file is attached.png (25.3 KB) - added by krupajnanda 3 years ago.
expectd output.png (3.3 KB) - added by krupajnanda 3 years ago.
It should look something like as shown in expected output.png file
41648.diff (411 bytes) - added by andraganescu 17 months ago.
CSS fixing the text alignment for the upload input
41648.png (128.8 KB) - added by samful 8 weeks ago.

Download all attachments as: .zip

Change History (16)

@krupajnanda
3 years ago

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

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


17 months ago

#2 @mikeschroder
17 months ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release
  • Priority changed from normal to low
  • Severity changed from normal to minor

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

#3 @aaroncampbell
17 months ago

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.

#4 follow-up: @lucagrandicelli
17 months ago

Hi @krupajnanda, used browser?

#5 in reply to: ↑ 4 @krupajnanda
17 months ago

Replying to lucagrandicelli:

Hi @krupajnanda, used browser?

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

@andraganescu
17 months ago

CSS fixing the text alignment for the upload input

#6 follow-up: @andraganescu
17 months ago

  • Keywords has-patch added; needs-patch removed

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

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

#7 in reply to: ↑ 6 @krupajnanda
17 months ago

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

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


4 months ago

#9 @SergeyBiryukov
4 months ago

  • Milestone changed from Future Release to 5.5
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#10 @samful
8 weeks ago

  • Focuses css added

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:

@samful
8 weeks ago

#11 @samful
8 weeks ago

  • Keywords needs-refresh needs-testing added
Note: See TracTickets for help on using tickets.