[wp-trac] [WordPress Trac] #35220: collapsed Customize sidebar , showing empty while we change page view from desktop to responsive mobile view

[WordPress Trac]

#35220: collapsed Customize sidebar , showing empty while we change page view from
desktop to responsive mobile view
--------------------------+------------------
 Reporter:  mostafas      |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  4.5
Component:  Customize     |     Version:  4.4
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:  ui
--------------------------+------------------
Changes (by afercia):

 * keywords:   => needs-patch
 * focuses:  ui, administration => ui
 * version:  trunk => 4.4
 * milestone:  Awaiting Review => 4.5


Comment:

 At a screen width of 640 pixels and below the Customizer two columns
 layout:

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

 switches to a "responsive view" with a one column layout:

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

 where the sidebar has a width of 100%, the "Collapse" button disappears,
 and there's a new UI control to switch from the Customizer sidebar to the
 preview.

 By the way, when the sidebar is collapsed and then the screen width
 becomes less or equal to 640 pixels (for example users may change
 orientation on a mobile device) the sidebar is still collapsed and this
 rule in `themes.css` will still set a negative left margin on the sidebar
 so the sidebar text will be off screen:
 {{{
 .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
         margin-left: -300px;
 }
 }}}

 This rule should be simply reset to `margin-left: 0;` in a CSS media
 query. By the way I'm not sure why it's in `themes.css` in the first
 place. Any feedback welcome :)

 Please consider also that in the Theme installer the UI works differently
 and there's a bit of inconsistency: there's no responsive view and the
 layout is always a two columns layout. Maybe it should work in the same
 way as the Customizer?

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

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