[wp-trac] [WordPress Trac] #49576: Menu Editor UI issues on med-large screens

[WordPress Trac]

#49576: Menu Editor UI issues on med-large screens
----------------------------------------------+-----------------------
 Reporter:  garrett-eclipse                   |       Owner:  audrasjb
     Type:  defect (bug)                      |      Status:  assigned
 Priority:  normal                            |   Milestone:  5.5
Component:  Menus                             |     Version:
 Severity:  normal                            |  Resolution:
 Keywords:  has-screenshots has-patch commit  |     Focuses:  ui, css
----------------------------------------------+-----------------------

Comment (by afercia):

 Thanks @garrett-eclipse. Just to clarify, the vertical alignment issue
 wasn't introduced in WordPress 5.3.

 For issues related to CSS it would be nice to always compare with previous
 versions to verify what is the original cause of the problem. As mentioned
 by @man4toman, the button has a `button-large` class that makes its height
 32 pixels. It's taller than the input field. I don't see a good reason why
 this button should be `large` so I'd just remove the `button-large` class.

 In WordPress 5.2 this was even more evident, see screenshot below. On 5.2
 I can reproduce also the button dropping down the input and the focus
 style issue (though less visible).

 I'd say 5.3 slightly improved the alignment. Regarding the general issue
 of vertical alignment between various form controls, it's a long-standing
 problem in the admin. Often, the root cause is that the CSS `vertical-
 align` property is used inconsistently across the admin on a case-by-case
 basis.

 In the long term, case-by-case adjustments are just bad because they
 introduce a huge amount of inconsistencies that are really hard to fix.
 For some CSS sanity, exceptions and special cases should be removed. This
 issue was also noted in
 https://core.trac.wordpress.org/ticket/48420#comment:20

 > I'm at a point where a decision needs to be made. To make all form
 controls have by default a good vertical alignment (especially with
 visible labels or other text close to them) there are two possible options
 I can think of:
 > - use flexbox: however, this would require a wrapper element as a flex
 container thus a considerable amount of markup output should be changed,
 which is not ideal
 > - use CSS properties of the inline formatting context (inline-level
 boxes) like `vertical-align`
 > I'd lean towards using vertical-align: middle for all form controls as
 it's able to align elements and text of different heights. However, this
 would imply that form controls shouldn't use top or bottom margins.

 A decision wasn't made and this issue still need to be addressed across
 the whole admin.

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