[wp-trac] [WordPress Trac] #42359: Widgets and Menus panels break in small screen

[WordPress Trac]

#42359: Widgets and Menus panels break in small screen
----------------------------+--------------------
 Reporter:  Mahvash Fatima  |       Owner:
     Type:  defect (bug)    |      Status:  new
 Priority:  high            |   Milestone:  4.9
Component:  Customize       |     Version:  trunk
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  ui
----------------------------+--------------------

Comment (by Mahvash Fatima):

 #42359.2.diff is to implement the fix and improvement. I think there is
 nothing else left.

 '''About the changes -'''

 1. Move {{{ .wp-full-overlay.expanded { margin-left: margin-left: 0; } }}}
 from screen size 640px to screen size 600px.

 2. Remove {{{ .outer-section-open .wp-full-overlay.expanded { margin-left:
 0; } }}} from screen size 640px because {{{ .wp-full-overlay.expanded }}}
 already have {{{ margin-left: 0 }}} and there is no need to give {{{
 margin-left: 0 }}} to {{{ .outer-section-open .wp-full-overlay.expanded
 }}} . I think, this is unnecessary.

 3. Remove {{{ .wp-full-overlay.expanded { margin-left: 300px; } }}} from
 screen size 640px because it is overwritten in full screen size.

 4. Move
 {{{
 body.adding-widget div#available-widgets,
 body.adding-menu-items div#available-menu-items,
 body.outer-section-open div#customize-sidebar-outer-content {
     top: 46px;
     z-index: 10;
 }
 }}}

 from screen size 640px to 600px
 and remove {{{ left: 0; }}} from screen size 640px because {{{ left: 0;
 }}} is overwritten in full screen size.

 5. Move


 {{{
 body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-
 content {
     left: -100%;
 }

 body.wp-customizer.outer-section-open .wp-full-overlay.expanded
 #customize-sidebar-outer-content {
     left: 0;
 }
 }}}

 from screen size 640px to 600px

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