Widgets and Menus panels break in small screen

[melchoyce]

Able to replicate. @westonruter this seems like a recent change — any idea what would have affected it?

[westonruter]

I thought it might have been [41860] for #42027, but reverting that doesn't fix the problem.

@sayedwp Any ideas?

[westonruter]

Sorry, I didn't see there was a patch. The issue looks like it was introduced in [41893] for #42215.

The problem is the margin-left which I can see the patch is addressing.

[westonruter]

@Mahvash-Fatima The patch tests well, but something seems not quite right in that there are multiple media queries targeting the same element to give it margin-left: 0. Do some rules need to be combined/refactored? See multiple-media-queries.png​.

[Mahvash Fatima]

I found one more issue. The Publish Settings section is not visible between small sizes ( 640px - 600px ). The attached patch is to fix that. This is temporary, I am working to fix and improve it.

[westonruter]

Replying to Mahvash Fatima:

I found one more issue. The Publish Settings section is not visible between small sizes ( 640px - 600px ). The attached patch is to fix that. This is temporary, I am working to fix and improve it.

@Mahvash-Fatima Are your new patches intended to implement the fix and improvement? Anything else left to do as far as you are concerned?

[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

[westonruter]

In 42036:

Customize: Fix mobile placement of panes for available widgets and nav menu items.

Props Mahvash-Fatima.
Amends [41893].
See #42215.
Fixes #42359.