Fix: Snack bar not fixed on certain pages in the Site Editor

WordPress · Aug 1, 2023 · be09691 · be09691
1 parent 561d244
commit be09691
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 21 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -189,6 +189,7 @@ $z-layers: (
 	".edit-site-layout__hub": 3,
 	".edit-site-layout__header": 2,
 	".edit-site-page-header": 2,
+	".edit-site-page-content": 1,
 	".edit-site-patterns__header": 2,
 	".edit-site-patterns__grid-pagination": 2,
 	".edit-site-layout__canvas-container": 2,

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -6,14 +6,6 @@
 	padding: 0;
 	overflow-x: auto;
 
-	.edit-site-page-content {
-		height: 100%;
-		position: relative;
-		padding: 0;
-		display: flex;
-		flex-flow: column;
-	}
-
 	.components-base-control {
 		width: 100%;
 		@include break-medium {

diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
@@ -26,17 +26,17 @@ export default function Page( {
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
-			{ ! hideTitleFromUI && title && (
-				<Header
-					title={ title }
-					subTitle={ subTitle }
-					actions={ actions }
-				/>
-			) }
 			<div className="edit-site-page-content">
+				{ ! hideTitleFromUI && title && (
+					<Header
+						title={ title }
+						subTitle={ subTitle }
+						actions={ actions }
+					/>
+				) }
 				{ children }
-				<EditorSnackbars />
 			</div>
+			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
@@ -2,7 +2,7 @@
 	color: $gray-800;
 	background: $white;
 	flex-grow: 1;
-	overflow: auto;
+	overflow: hidden;
 	margin: 0;
 	margin-top: $header-height;
 	@include break-medium() {
@@ -13,8 +13,7 @@
 
 .edit-site-page-header {
 	padding: 0 $grid-unit-40;
-	height: $header-height;
-	padding-left: $grid-unit-40;
+	min-height: $header-height;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
@@ -33,6 +32,10 @@
 }
 
 .edit-site-page-content {
-	padding: $grid-unit-40 $grid-unit-40;
-	overflow-x: auto;
+	height: 100%;
+	display: flex;
+	overflow: auto;
+	flex-flow: column;
+	position: relative;
+	z-index: z-index(".edit-site-page-content");
 }
diff --git a/packages/edit-site/src/components/table/style.scss b/packages/edit-site/src/components/table/style.scss
@@ -1,5 +1,6 @@
 .edit-site-table-wrapper {
 	width: 100%;
+	padding: $grid-unit-40;
 }
 
 .edit-site-table {