[wp-trac] [WordPress Trac] #34214: Navigation tabs styling inconsistencies

[WordPress Trac]

#34214: Navigation tabs styling inconsistencies
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  4.3
 Severity:  normal          |   Keywords:
  Focuses:  ui              |
----------------------------+-----------------------------
 The navigation "tabs" used in the admin have some minor styling
 inconsistencies, e.g. about spacing between tabs:

 the About screen:

 [[Image(https://cldup.com/_uE6WFcnhg.png)]]

 the Freedoms screen (same for the Credits screen):

 [[Image(https://cldup.com/zk6teYesaN.png)]]

 the Appearance > Menus screen:

 [[Image(https://cldup.com/-WSNBNtNZ0.png)]]

 Since the "tabs" are set to be displayed as `inline-block`, spaces, tabs,
 and new lines in the markup do matter. To style them consistently the
 markup should be paired first. The font size on the container affects the
 spacing between tabs too.
 Not sure why the initial left padding should be different in the "About &
 Co." screens and in the menu screen, I'd say to pair it.

 When these "tabs" are used as "real tabs" (whatever that means), for
 example as a well known SEO-related plugin does, there's a 1 pixel "jump"
 when switching tabs. To actually see this "jump" you should install the
 plugin and see it "in action". It's hard to catch this in a screenshot by
 the way you may notice in the screenshots below there's a 1 pixel
 difference (and the bottom border is missing) while clicking on a tab:

 [[Image(https://cldup.com/i0GJOsBK8E.png)]]

 [[Image(https://cldup.com/w16GeVxZ5i.png)]]

 Finally, designers and UI people may want to have a look at how the tabs
 look like on small screens: they're basically changed in a sort of
 "buttons" and that makes sense, wondering if we should try to find some
 new design ideas :)

 [[Image(https://cldup.com/IplL02nser.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34214>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform