style.scss

// On Mobile devices, swiping the HTML element should not scroll.
// By making it fixed, we prevent that.
html.interface-interface-skeleton__html-container {
	position: fixed;
	width: 100%;

	@include break-medium() {
		position: initial;
		width: initial;
	}
}

.interface-interface-skeleton {
	display: flex;
	flex-direction: row;
	height: auto;
	max-height: 100%;

	// Fill the available space on Mobile.
	position: fixed;
	top: $admin-bar-height-big;
	left: 0;
	right: 0;
	bottom: 0;

	// Adjust to admin-bar going small.
	@media (min-width: #{ ($break-medium + 1) }) {
		top: $admin-bar-height;

		.is-fullscreen-mode & {
			top: 0;
		}
	}
}

.interface-interface-skeleton__editor {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

@include editor-left(".interface-interface-skeleton");

.interface-interface-skeleton__body {
	flex-grow: 1;
	display: flex;

	// Even on Mobile, we choose to scroll this element on its own.
	// This helps enable a fixed-to-top toolbar that makes the editing experience
	// on Mobile Safari usable.
	// Unfortunately an issue still exists where if you swipe the top toolbar
	// or beyond the bottom of the page when the soft keyboard is showing, you scroll
	// the body element and can scroll the toolbar out of view.
	// This is still preferable, though, as it allows the editor to function at all.
	overflow: auto;

	// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
	// This allows us to disallow the scroll-chaining and rubber-banding that is currently
	// is the cause of the issue outlined above.
	// In other words, the following behavior doesn't yet work in Safari, but if/when
	// it is added, it should take care of the issue.
	// See also: https://drafts.csswg.org/css-overscroll/
	overscroll-behavior-y: none;

	// Footer overlap prevention
	@include break-medium() {
		padding-bottom: $button-size-small + $border-width;
	}
}

.interface-interface-skeleton__content {
	flex-grow: 1;

	// Treat as flex container to allow children to grow to occupy full
	// available height of the content area.
	display: flex;
	flex-direction: column;

	// On Mobile the header is fixed to keep HTML as scrollable.
	// Beyond the medium breakpoint, we allow the sidebar.
	// The sidebar should scroll independently, so enable scroll here also.

	overflow: auto;

}

.interface-interface-skeleton__left-sidebar,
.interface-interface-skeleton__sidebar {
	display: block;
	width: auto; // Keep the sidebar width flexible.
	flex-shrink: 0;
	position: absolute;
	z-index: z-index(".interface-interface-skeleton__sidebar");
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: $white;
	color: $gray-900;

	// On Mobile the header is fixed to keep HTML as scrollable.
	@include break-medium() {
		position: relative !important;
		z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
	}
}

.interface-interface-skeleton__sidebar {
	@include break-medium() {
		overflow: auto;
		border-left: $border-width solid $gray-200;
	}
}

.interface-interface-skeleton__left-sidebar {
	@include break-medium() {
		border-right: $border-width solid $gray-200;
		overflow: hidden; // prevent overscroll
	}
}

.interface-interface-skeleton__header {
	flex-shrink: 0;
	height: auto;  // Keep the height flexible.
	border-bottom: $border-width solid $gray-200;
	z-index: z-index(".interface-interface-skeleton__header");
	color: $gray-900;

	// On Mobile the header is sticky.
	position: sticky;
	top: 0;

	// Cancel the fixed positioning used on Mobile.
	@include break-small() {
		position: initial;
		top: 0;
	}
}

.interface-interface-skeleton__footer {
	height: auto; // Keep the height flexible.
	flex-shrink: 0;
	border-top: $border-width solid $gray-200;
	color: $gray-900;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: $white;
	z-index: z-index(".interface-interface-skeleton__footer");

	// When the navigate regions shortcut is used it applies position: relative
	// to regions. The footer should always stay stuck to the bottom though, so
	// override using a more specific selector with position: fixed.
	.is-focusing-regions &[role="region"] {
		position: fixed;
	}

	// On Mobile the footer is hidden
	display: none;
	@include break-medium() {
		display: flex;
	}

	.block-editor-block-breadcrumb {
		z-index: z-index(".edit-post-layout__footer");
		display: flex;
		background: $white;
		height: $button-size-small;
		align-items: center;
		font-size: $default-font-size;
		padding: 0 ($grid-unit-15 + 6px);
	}
}

.interface-interface-skeleton__actions {
	z-index: z-index(".interface-interface-skeleton__actions");
	position: fixed !important; // Need to override the default relative positioning
	top: -9999em;
	bottom: auto;
	left: auto;
	right: 0;
	width: $sidebar-width;
	color: $gray-900;

	&:focus {
		top: auto;
		bottom: 0;
	}
}