Add Media button and other editor buttons have broken visual styling on mobiles

[FolioVision]

Add Media button has a buggy visual appearance on smaller screens below 782px:

• button icon is not vertically centered and is touching the left edge of the button
• all the other editor buttons (actually A and DIVs) are taller and their text labels are bigger

All the other plugin buttons above the editor box should share the same unified look with the Add Media button. They share the same .button class, but for instance ".#wp-content-media-buttons a"
have a different font-size and fixed height in /wp-admin/css/edit.css. The padding is also different. There are more places to look at for fixing the issue and we can propose those changes once approved.

Even after reducing their size to the default Add Media button they will be still large enough for mobiles to tap on. Plus if someone has a couple of plugins activated, there will be enough space to accommodate all of the extra buttons (I've tested out with 5 incl. Add Media - see screenshot ​http://foliovision.com/images/graphics/editor-buttons-misplaced.png).

On top of that, there should be a unified template to set up these buttons including their custom icons. Various buttons are using different markup, so there should be probably a general advice on how to style those buttons and adding custom plugin icons.

thanks
Viktor

[FolioVision]

edit.min.css

[FolioVision]

edit.css

[FolioVision]

Two files in /wp-admin/css/ had to be changed - edit.css and edit.min.css, both diff files are attached. We'll try to take a look at the RTL versions
Viktor

[DrewAPicture]

@FolioVision There's no need to patch the minified or RTL files, those are generated automatically by the build script.

Assigning to mark the good-first-bug as "claimed".

[GaryJ]

OP's referenced screenshot uploaded, so it stays as part of the ticket (and easier to see with the preview on Trac).

[FolioVision]

Thanks for adding the screenshots inline @GaryJ The bug report and fix make a lot more sense this way.

Alec

PS. Viktor please include screenshots inline as uploads in the future. Thanks.

[hugobaeta]

I got to review this today for contributors day in WCEU, and realized the button icon alignment happens even when it's just the "Add Media" button. I also tested with other plugin-added buttons (I tested with the "Contact Form" module in Jetpack to see another example of this) and noticed the styles of those extra buttons are provided by core, but are indeed inconsistent. Here are some screenshots at different breakpoints:

Normal desktop width (where it looks good):

Narrow, mobile, viewport (where the big occurs):

So, the only issue with the proposed patch is that, in my opinion, it would be better to standardize all buttons in that area, instead of creating exceptions for the "Add Media" button. Also, a part of the bug is that the left padding disappears, so it would be nice if that was fixed.

I don't have time today for a patch update, but if you can get one that addresses this @FolioVision, that would be great and I'll make sure to get a committer's attention to this! :)

[FolioVision]

Latest patch for /wp-admin/css/edit.css

[FolioVision]

@hugobaeta Just now I've got to create the patch (36999-3.diff)

Viktor

[FolioVision]

Including screenshots of the patch provided, with the bug and with the fix

[karmatosed]

Looks great to me and +1 to having this committed.

[SergeyBiryukov]

In 38132:

Editor: Improve styling of "Add Media" button on mobile and make it more consistent with media buttons added by plugins.

Props FolioVision.
Fixes #36999.