Set explicit z-index on interface body to ensure it’s pinned under in…

…terface header (#32732)

* Set explicit z-index on interface body to ensure it’s pinned under the interface header

* Add z-index to skelton content to avoid publish button bug

Adding z-index to body causes Publish button in actions sidebar to appear underneath the layout header causing the “wrong” publish button to be shown. Applying z-index to content avoids this whilst achieving the same outcome in terms of avoiding the bleed of backgrounfd on mobile safari when scrolling the Widgets editor.

packages/base-styles/_z-index.scss

@@ -32,6 +32,7 @@ $z-layers: (
 	".block-editor-url-input__suggestions": 30,
 	".edit-post-layout__footer": 30,
 	".interface-interface-skeleton__header": 30,
+	".interface-interface-skeleton__body": 20,
 	".edit-site-header": 62,
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter

packages/interface/src/components/interface-skeleton/style.scss

@@ -82,9 +82,13 @@ html.interface-interface-skeleton__html-container {
 	// 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;
 
+	// On Safari iOS on smaller viewports lack of a z-index causes the background
+	// to "bleed" through the header.
+	// See https://github.com/WordPress/gutenberg/issues/32631
+	z-index: z-index(".interface-interface-skeleton__body");
+
 }
 
 .interface-interface-skeleton__secondary-sidebar,