[wp-trac] [WordPress Trac] #48420: Admin CSS: standardize form controls heights, alignments, etc.

[WordPress Trac]

#48420: Admin CSS: standardize form controls heights, alignments, etc.
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch 5-3      |     Focuses:  ui
  -admin-css-changes                             |
-------------------------------------------------+-------------------------

Comment (by afercia):

 Further improvements that need to be explored:

 **Default 1 pixel margin on input and select elements**
 See  https://core.trac.wordpress.org/browser/trunk/src/wp-
 admin/css/forms.css?rev=46559&marks=29-32#L28
 I'd like to propose to remove it as it makes controls alignments
 troublesome at the point core itself already resets this default margin in
 various places. I do realize it's there for some historical reason but I
 don't see a good reason to keep it today and it has always been annoying,
 to say the least.

 **Standardize the controls border-radius**
 Form controls have different border-radius values, also in Gutenberg. Not
 sure there's a good reason for this. It would be nice to standardize. See
 ticket:34904#comment:109. This needs a design decision.

 **Revert the selects font size to 14 pixels**
 This was changed to 13 pixels in
 https://core.trac.wordpress.org/changeset/46356 but seems to me it's not a
 great improvement and makes alignments troublesome. All form controls
 should have the same font size as this has an impact on horizontal
 alignments and the computed line-height values. This needs design
 feedback.

 **Tables borders Webkit bug on Windows**
 Make sure to use `border-collapse: collapse;` on the `.widefat` tables to
 address a weird Webkit glitch that happens only on Windows. This appears
 to be triggered by line-height values rounding after the 5.3 admin CSS
 changes but it's technically unrelated and seems really a Webkit bug.
 Regardless, `border-collapse: collapse;` is standard and it's better than
 the current `border-spacing: 0`. Worth noting core already uses `border-
 collapse: collapse;` on other tables and it should have been user on
 `.widefat` tables as well since the beginning. Hat tip to @azaozz
 [https://wordpress.slack.com/archives/C02RQBWTW/p1571868323277400 for
 reporting this on Slack].

 **Address edge cases**
 - tinymce buttons e.g. the insert link UI buttons
 - improve the `.page-title-action` button-links
 - in a few places in core, a super-basic form "validation" adds a red
 border to the invalid fields: this doesn't seem to play nicely with the
 new inputs styles, at least in the Customizer (see screenshot)

 [[Image(http://cldup.com/QX-nv0pFB2.png)]]

 Please report any glitch you may have noticed after carefully comparing
 with WordPress 5.2 to make sure it's actually something related to the CSS
 changes introduced in 5.3 :)

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