[wp-trac] [WordPress Trac] #36999: Add Media button and other editor buttons have broken visual styling on mobiles

[WordPress Trac]

#36999: Add Media button and other editor buttons have broken visual styling on
mobiles
-------------------------------------------------+-------------------------
 Reporter:  FolioVision                          |       Owner:
     Type:  defect (bug)                         |  FolioVision
 Priority:  normal                               |      Status:  assigned
Component:  Editor                               |   Milestone:  Awaiting
 Severity:  normal                               |  Review
 Keywords:  good-first-bug has-patch has-        |     Version:  4.5.2
  screenshots                                    |  Resolution:
                                                 |     Focuses:  ui
-------------------------------------------------+-------------------------

Comment (by 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):
 [[Image(https://cldup.com/IDr2S-ETZW.png)]]

 Narrow, mobile, viewport (where the big occurs):
 [[Image(https://cldup.com/3lkvhG-rdC.png)]]

 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! :)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/36999#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform