From 5379531e8e931612e844c4467fd852db0f729fe8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:51:46 +0200
Subject: [PATCH] Display content frame in mobile for Pages when canvas is not
 edit and fix overlapping hub in Templates (#60409)

This extracts some existing styles in the Patterns page to the Hub component, so any Page component (Pages, Templates, Patterns) has the same styles.

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 packages/edit-site/src/components/layout/index.js          | 7 +------
 packages/edit-site/src/components/layout/router.js         | 4 +++-
 packages/edit-site/src/components/layout/style.scss        | 7 +++++++
 packages/edit-site/src/components/page-patterns/style.scss | 6 ------
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index d95f9d597db43..001a4fed66784 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -294,12 +294,7 @@ export default function Layout() {
 					<SavePanel />
 
 					{ isMobileViewport && areas.mobile && (
-						<div
-							className="edit-site-layout__mobile"
-							style={ {
-								maxWidth: widths?.content,
-							} }
-						>
+						<div className="edit-site-layout__mobile">
 							{ areas.mobile }
 						</div>
 					) }
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index 2b783ce895927..3482c122c3630 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -52,7 +52,9 @@ export default function useLayoutAreas() {
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
+					) : (
+						<PagePages />
+					),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 4d76dcdbd4256..05dbf1647fd2f 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -26,6 +26,13 @@
 	}
 }
 
+.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) {
+	margin-bottom: $header-height;
+	@include break-medium {
+		margin-bottom: 0;
+	}
+}
+
 .edit-site-layout__header-container {
 	z-index: z-index(".edit-site-layout__header-container");
 }
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 74205b044b340..6c616426aa389 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -43,12 +43,6 @@
 }
 
 .edit-site-page-patterns-dataviews {
-	margin-top: 60px;
-
-	@include break-medium {
-		margin-top: 0;
-	}
-
 	.page-patterns-preview-field {
 		display: flex;
 		flex-direction: column;