White space section under Navigation sidebar panel in mobile devices

[himshekhar07]

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;
  }
 }

[nuhel]

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 line number 2177.

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

@media (max-width: 599px) {
	.edit-site-layout__sidebar > div:nth-child(2) {
		height: unset;
	}
}

[sabernhardt]

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.

[sabernhardt]

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.

[algorithmsunlocks]

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

Thank you!
Ruman Ahmed

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

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.