Try: Improve scrolling of navigation menu on small screens

We scroll the editing canvas, the inspector sidebar, and the block library independently at desktop breakpoints. We do this so that the sidebar inspector can stay in view even if you have scrolled far down the editing canvas, and to avoid scroll bleed.

However because the navigation sidebar (on the left) has flyout menus on the desktop breakpoints, we can't yet scroll this one separately. If a user has a bunch of plugins installed that add menu items, or a small screen, these manu items might go beyond the visible height of the viewport. To make these accessible regardless, when this happens the `body` element scrolls to let you reach them.

In this situation, there is currently an issue where the editing canvas might scroll out of view when you scroll to the bottom of the sidebar.

This PR improves that situation by making the editing canvas `position: fixed;`, same as the sidebar is. This ensures that the entire editor scrolls with you down the page, as you scroll the `body` content.

This needs a good testing. `position: fixed;` does not inherit from a relative parent, which means we have to specifiy a matrix of left margins to accommodate for the different configurations of the navigation menu: auto-collapsed, manually collapsed, or the default width. To test, please verify that everything works as intended. Please test:

- All breakpoints beyond the 600px small breakpoint.
- Fullscreen and not fullscreen modes.
- With the navigation menu auto collapsing, and explicitly collapsed.
- With the inspector sidebar present or hidden.
- With metaboxes present and not present.

packages/edit-post/src/components/layout/style.scss

@@ -28,7 +28,7 @@
 		}
 	}
 
-	// on mobile, toolbars behave differently
+	// On mobile, toolbars behave differently.
 	@include break-small {
 		padding-top: $header-height;
 	}
@@ -38,7 +38,7 @@
 			padding-top: $block-controls-height;
 		}
 
-		// on mobile, toolbars behave differently
+		// On mobile, toolbars behave differently.
 		@include break-small {
 			padding-top: $header-height + $block-toolbar-height;
 
@@ -68,11 +68,58 @@
 }
 
 .edit-post-layout__content {
-	position: relative;
 	display: flex;
-	min-height: 100%;
 	flex-direction: column;
 
+	// These rules are specific to mobile and small breakpoints.
+	min-height: 100%;
+	position: relative;
+
+	// We scroll the main editing canvas, the sidebar, and the block library separately to prevent scroll bleed.
+	// Because the navigation sidebar menu has "flyout" menus, we can't yet, scroll that independently, but as soon
+	// as we can, we should simplify these rules.
+	// In the mean time, if a user has a small screen and lots of plugin-added menu items in the navigation menu,
+	// they have to be able to scroll. To accommodate the flyout menus, we scroll the `body` element for this.
+	@include break-medium() {
+		// Because the body element scrolls the navigation sidebar, we have to use position fixed here.
+		// Otherwise you would scroll the editing canvas out of view when you scroll the sidebar.
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: $header-height + $admin-bar-height; // Because this is scoped to break-medium and larger, the admin-bar is always this height.
+
+		// Sadly, `position: fixed;` do not inherit boundaries from a relative parent. Due to that we have to compensate using `calc`.
+		min-height: calc(100% - #{ $header-height + $admin-bar-height });
+		height: auto; // This overrides the 100% height the element inherits from line 3.
+
+		// In this matrix, we compensate for any configurations for the presence and width of the navigation sidebar.
+		// Because we are beyond the medium breakpoint, we only have to worry about folded, auto-folded, and default.
+		margin-left: $admin-sidebar-width;
+		body.auto-fold & {
+			margin-left: $admin-sidebar-width-collapsed;
+		}
+
+		// Default is to auto-fold below $break-large and expand beyond.
+		@include break-large() {
+			body.auto-fold & {
+				margin-left: $admin-sidebar-width;
+			}
+		}
+
+		// Manually/explicitly collapsed.
+		body.folded & {
+			margin-left: $admin-sidebar-width-collapsed;
+		}
+
+		// Undo this for fullscreen mode.
+		body.is-fullscreen-mode & {
+			margin-left: auto;
+			position: relative;
+			top: inherit;
+		}
+	}
+
 	// Pad the scroll box so content on the bottom can be scrolled up.
 	padding-bottom: 50vh;
 	@include break-small {