[wp-trac] [WordPress Trac] #33220: Customizer: layout issues with autofocus'd sections on small screens

[WordPress Trac]

#33220: Customizer: layout issues with autofocus'd sections on small screens
--------------------------+-----------------------------
 Reporter:  mattwiebe     |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 The short version: the autofocus-ed section starts its layout too high.
 Interestingly, the `margin-top` and `height` values are the same when
 opened later without autofocus (which works fine) as compared with
 autofocus. Fun times!

 iOS SImulator, 4s:
 [[Image(https://cldup.com/0owvo_sgt6.png)]]

 Chrome emulator, 420x320:
 [[Image(https://cldup.com/3PCbXgUbyu.png)]]

 This can be an enormous problem since the back button is hidden in some
 cases.

 My hunch is that the layout should be defined in CSS rather than
 calculated in JS since we're not actually dealing with a lot of variables
 here, and we know these variables.

 Tested against trunk @ [33493]

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