Customizer header overlaps top of preview at small screen sizes

[sumitsingh]

Hi,

Design issue in customize.php on Twenty Twenty theme when preview page.

For more information sees mention screenshot.

Thanks

[sumitsingh]

Error screenshot file

[sumitsingh]

I have also a solution. Add below CSS in style.css

@media screen and (max-width: 640px) {

#customize-preview {

margin-top: 45px;

}

}

[sumitsingh]

Error 2 screenshot file

[sumitsingh]

Error 3 screenshot file

[sabernhardt]

This would need fixing within the Customizer. As an overlay, the header could cover editable elements (and their buttons) at the top of the site preview with many themes.

The themes filter search icon and button positioning could be better, too. Setting the filter toggle margin to 0 in r41893 apparently made sense at that time, but it seems to need a margin now for narrower screens.

The third issue above involves the block editor (and I think that has been fixed).

[pooja1210]

Hi,

Test report for https://core.trac.wordpress.org/attachment/ticket/49009/49009.patch

Environment:
WordPress- V6.2.2
Os- Mac
Browser- Chrome

Expected Result: In customizer preview the customize button should be visible properly ☑️

Screenshots:
Before: ​https://prnt.sc/8eCeZqR30761
After: ​https://prnt.sc/KgxrLMbHUAsS

The patch is working fine for the 1st error and 2nd, 3rd issue is not reproducible.

Thanks!

[sabernhardt]

adds padding to the iframe and keeps the height at 100% (including that padding)

[sabernhardt]

49009.1.patch​ focuses on only the overlap at the top. Instead of a margin on the container, the iframe could have padding.

Other style changes from the first patch do not seem necessary anymore, though new issues occur (which can be discussed on another ticket).

[sabernhardt]

#52051 was marked as a duplicate.

[sabernhardt]

adjusts padding to 46px and explains that the extra pixel comes from the #customize-controls bottom border