From 32ee6a3588215b340a839a8eff32426d0c5b6ec4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 09:59:32 +0200
Subject: [PATCH 1/8] Display content frame in mobile when canvas is not edit

---
 packages/edit-site/src/components/layout/router.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index 2b783ce895927d..3482c122c36305 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,

From 575dee92c6d7c2ef308cd3d753f2e036444ee26b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 5 Apr 2024 10:28:35 +0200
Subject: [PATCH 2/8] Mobile layout: do not use widths from content in full
 layout

---
 packages/edit-site/src/components/layout/index.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index d95f9d597db43d..001a4fed667848 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>
 					) }

From eaca957fcb91b4a63b9f7d7e0dfe7f37101e7b2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 11:10:25 +0200
Subject: [PATCH 3/8] Pages: give space for top-bar (with hub & search) in
 mobile

---
 packages/edit-site/src/components/page-pages/index.js   | 1 +
 packages/edit-site/src/components/page-pages/style.scss | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index c6b6d95e57a51f..b43fdd08119bab 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -387,6 +387,7 @@ export default function PagePages() {
 	return (
 		<Page
 			title={ __( 'Pages' ) }
+			className="edit-site-page-pages"
 			actions={
 				<>
 					<Button variant="primary" onClick={ openModal }>
diff --git a/packages/edit-site/src/components/page-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 442ea7c4928899..5e9ecfcbf408ce 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -1,3 +1,11 @@
+.edit-site-page-pages {
+	margin-top: $header-height;
+
+	@include break-medium {
+		margin-top: 0;
+	}
+}
+
 .page-pages-preview-field__button {
 	box-shadow: none;
 	border: none;

From 333374be3784cb522604b783dc4089b0bf730708 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 11:11:20 +0200
Subject: [PATCH 4/8] Templates & Parts: give space for top-bar (with hub &
 search) in mobile

---
 .../src/components/page-templates-template-parts/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index 79c999e50acdf7..7985e0f270d583 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -60,6 +60,12 @@
 }
 
 .edit-site-page-template-template-parts-dataviews {
+	margin-top: $header-height;
+
+	@include break-medium {
+		margin-top: 0;
+	}
+
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}

From f7fc9b2ae9d1b94c84651059729b695d54e1c6b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 5 Apr 2024 10:30:57 +0200
Subject: [PATCH 5/8] Patterns: use sass variable for setting margin instead of
 raw value

---
 packages/edit-site/src/components/page-patterns/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index d4afcaea186476..e3dc2219be2792 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -43,7 +43,7 @@
 }
 
 .edit-site-page-patterns-dataviews {
-	margin-top: 60px;
+	margin-top: $header-height;
 
 	@include break-medium {
 		margin-top: 0;

From e03b2d1d9d640131abb5dea45a1977ab6a2351a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 5 Apr 2024 10:52:43 +0200
Subject: [PATCH 6/8] Extract margin rule to hub styles

---
 packages/edit-site/src/components/layout/style.scss       | 7 +++++++
 packages/edit-site/src/components/page-pages/style.scss   | 8 --------
 .../edit-site/src/components/page-patterns/style.scss     | 6 ------
 .../components/page-templates-template-parts/style.scss   | 6 ------
 4 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 4d76dcdbd42562..d15d0ede8cb0dd 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) {
+	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-pages/style.scss b/packages/edit-site/src/components/page-pages/style.scss
index 5e9ecfcbf408ce..442ea7c4928899 100644
--- a/packages/edit-site/src/components/page-pages/style.scss
+++ b/packages/edit-site/src/components/page-pages/style.scss
@@ -1,11 +1,3 @@
-.edit-site-page-pages {
-	margin-top: $header-height;
-
-	@include break-medium {
-		margin-top: 0;
-	}
-}
-
 .page-pages-preview-field__button {
 	box-shadow: none;
 	border: none;
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index e3dc2219be2792..2dc9326e4d29be 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: $header-height;
-
-	@include break-medium {
-		margin-top: 0;
-	}
-
 	.page-patterns-preview-field {
 		display: flex;
 		flex-direction: column;
diff --git a/packages/edit-site/src/components/page-templates-template-parts/style.scss b/packages/edit-site/src/components/page-templates-template-parts/style.scss
index 7985e0f270d583..79c999e50acdf7 100644
--- a/packages/edit-site/src/components/page-templates-template-parts/style.scss
+++ b/packages/edit-site/src/components/page-templates-template-parts/style.scss
@@ -60,12 +60,6 @@
 }
 
 .edit-site-page-template-template-parts-dataviews {
-	margin-top: $header-height;
-
-	@include break-medium {
-		margin-top: 0;
-	}
-
 	.dataviews-pagination {
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}

From 98f0e489eca880b4917f386e6666d255eb5c5ba3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 5 Apr 2024 11:06:34 +0200
Subject: [PATCH 7/8] Remove leftover from previous approach

---
 packages/edit-site/src/components/page-pages/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index b43fdd08119bab..c6b6d95e57a51f 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -387,7 +387,6 @@ export default function PagePages() {
 	return (
 		<Page
 			title={ __( 'Pages' ) }
-			className="edit-site-page-pages"
 			actions={
 				<>
 					<Button variant="primary" onClick={ openModal }>

From 7f86266caa613c60647a40c21892bff653150050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:17:29 +0200
Subject: [PATCH 8/8] Scope styles to the Page component

---
 packages/edit-site/src/components/layout/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index d15d0ede8cb0dd..05dbf1647fd2f6 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -26,7 +26,7 @@
 	}
 }
 
-.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile) {
+.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;