WordPress.org

Make WordPress Core

#42359 closed defect (bug) (fixed)

Widgets and Menus panels break in small screen

Reported by: Mahvash Fatima Owned by: westonruter
Milestone: 4.9 Priority: high
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

https://user-images.githubusercontent.com/12367607/32107579-ad9828f0-bb4c-11e7-85d5-25a92f394757.png

https://user-images.githubusercontent.com/12367607/32107549-93d56bf8-bb4c-11e7-8b46-52facb93ed1a.png

Attachments (5)

42359.diff (891 bytes) - added by Mahvash Fatima 22 months ago.
margin-left.png (119.7 KB) - added by westonruter 22 months ago.
multiple-media-queries.png (71.6 KB) - added by westonruter 22 months ago.
42359.1.diff (4.7 KB) - added by Mahvash Fatima 22 months ago.
42359.2.diff (2.0 KB) - added by Mahvash Fatima 22 months ago.

Download all attachments as: .zip

Change History (13)

#1 @melchoyce
22 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.9
  • Priority changed from normal to high

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

#2 @westonruter
22 months ago

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

@sayedwp Any ideas?

#3 @westonruter
22 months ago

  • Keywords has-patch added; needs-patch removed

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.

#4 @westonruter
22 months ago

@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.

Last edited 22 months ago by westonruter (previous) (diff)

#5 follow-up: @Mahvash Fatima
22 months ago

https://user-images.githubusercontent.com/12367607/32111408-11464566-bb58-11e7-8952-ae4b3d4969f7.png

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.

#6 in reply to: ↑ 5 @westonruter
22 months ago

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?

#7 @Mahvash Fatima
22 months ago

#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.
  1. 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.
  1. Remove .wp-full-overlay.expanded { margin-left: 300px; } from screen size 640px because it is overwritten in full screen size.
  1. 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.

  1. 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

#8 @westonruter
22 months ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

In 42036:

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

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

Note: See TracTickets for help on using tickets.