Make WordPress Core

#58428 closed defect (bug) (fixed)

White space section under Navigation sidebar panel in mobile devices

Reported by: himshekhar07's profile himshekhar07 Owned by:
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: Cc:

Description

When I edit the page from the front side I get a white space section on the editor.

Issue recording: https://share.cleanshot.com/bjpYtXrR343312Y9WhSC

@media screen and (max-width:768px){
.edit-site-layout__sidebar>div{
    height: fit-content;
  }
 }

Attachments (2)

navigation-sidebar-WP6.2.png (88.2 KB) - added by sabernhardt 12 months ago.
panel without the Gutenberg plugin, scrolled down half-way to show both the panel and the space below
navigation-sidebar-GB15.9.1.png (90.4 KB) - added by sabernhardt 12 months ago.
empty element does not appear when attempting to scroll below navigation panel with Gutenberg 15.9.1

Download all attachments as: .zip

Change History (8)

#1 @nuhel
12 months ago

This issue is coming from npm package @wordpress

It can be fixed by adding the below css in npm package @wordpress->edit-site->build-style->style.css in ine number 2177.

(Line number is 2177 is not strict to follow but for convention)

@media (max-width: 599px) {

.edit-site-layoutsidebar > div:nth-child(2) {

height: unset;

}

}

Version 0, edited 12 months ago by nuhel (next)

#2 @SergeyBiryukov
12 months ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from White space section in mobile devices in twenty twenty three theme to Twenty Twenty-Three: White space section in mobile devices

#3 @sabernhardt
12 months ago

This also happens with Twenty Twenty-Two and at least one other block theme. The empty div still has the full height with Gutenberg 15.8.1 active.

#4 @sabernhardt
12 months ago

The > div styles were added in GB46903 and the height was changed in GB47142. If the empty div is necessary to keep, the styles could be updated to > div:not(:empty).

Anyway, this is an editor UI issue, which would belong in the Gutenberg GitHub repository.

#5 @algorithmsunlocks
12 months ago

This is also happened to me! Please have a look at the video:
[https://www.loom.com/share/977e58bbaae34bfe8ede41a4573ad401

Thank you!
Ruman Ahmed

@sabernhardt
12 months ago

panel without the Gutenberg plugin, scrolled down half-way to show both the panel and the space below

@sabernhardt
12 months ago

empty element does not appear when attempting to scroll below navigation panel with Gutenberg 15.9.1

#6 @sabernhardt
12 months ago

  • Component changed from Bundled Theme to Editor
  • Keywords needs-patch removed
  • Milestone changed from Awaiting Review to 6.3
  • Resolution set to fixed
  • Status changed from new to closed
  • Summary changed from Twenty Twenty-Three: White space section in mobile devices to White space section under Navigation sidebar panel in mobile devices

The empty div is not below the navigation panel in Gutenberg 15.9.1, so I could not scroll to any blank space. It would be nice to locate exactly which change fixed the issue, but this seems to be completed.

Note: See TracTickets for help on using tickets.