From df601f69808221ebe21a03b9443d489dda1e7d41 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 4 Dec 2024 12:33:46 +1100
Subject: [PATCH 1/2] Ensure that the empty frame border does not appear in
 mobile view

---
 packages/edit-site/src/components/global-styles/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 5574fe52d81f58..57f51f4b8f007c 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -226,6 +226,10 @@
 	// The &#{&} is a workaround for the specificity of the Card component.
 	&#{&},
 	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
+		box-shadow: none;
 		border-radius: $radius-small;
+		.block-editor-iframe__container {
+			border: 1px solid $gray-200;
+		}
 	}
 }

From 0c2442ee7b49139a7d3bb0256e5f8743255ce580 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Wed, 4 Dec 2024 12:44:48 +1100
Subject: [PATCH 2/2] display editor styles view in edit mode

---
 .../components/site-editor-routes/styles.js   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/site-editor-routes/styles.js b/packages/edit-site/src/components/site-editor-routes/styles.js
index 17e4a3c064d023..cf29dbebea3733 100644
--- a/packages/edit-site/src/components/site-editor-routes/styles.js
+++ b/packages/edit-site/src/components/site-editor-routes/styles.js
@@ -1,10 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * Internal dependencies
  */
 import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileGlobalStylesUI() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <GlobalStylesUIWrapper />;
+}
+
 export const stylesRoute = {
 	name: 'styles',
 	path: '/styles',
@@ -12,7 +31,7 @@ export const stylesRoute = {
 		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
 		preview: <Editor />,
-		mobile: <GlobalStylesUIWrapper />,
+		mobile: <MobileGlobalStylesUI />,
 	},
 	widths: {
 		content: 380,