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

@@ -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>
 					) }

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,

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");
 }

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;