diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index 7e5aa69dda2beb..f10d88a1172505 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -26,8 +26,6 @@ import SidebarButton from '../sidebar-button';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const history = useHistory();
 	const { params } = useLocation();
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
diff --git a/packages/edit-site/src/components/site-editor-routes/styles-edit.js b/packages/edit-site/src/components/site-editor-routes/styles-edit.js
index ff52b957bc3609..1100f1149b0bae 100644
--- a/packages/edit-site/src/components/site-editor-routes/styles-edit.js
+++ b/packages/edit-site/src/components/site-editor-routes/styles-edit.js
@@ -3,15 +3,25 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 
 export const stylesEditRoute = {
 	name: 'styles-edit',
 	match: ( params ) => {
-		return params.path === '/wp_global_styles' && params.canvas === 'edit';
+		return (
+			params.path &&
+			params.path.startsWith( '/wp_global_styles' ) &&
+			params.canvas !== 'edit'
+		);
 	},
 	areas: {
+		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
-		preview: <Editor />,
-		mobile: <Editor />,
+		preview: <Editor isPreviewOnly />,
+		mobile: <Editor isPreviewOnly />,
+	},
+	widths: {
+		content: 380,
+		hasResize: false,
 	},
 };
diff --git a/packages/edit-site/src/components/site-editor-routes/styles-view.js b/packages/edit-site/src/components/site-editor-routes/styles-view.js
index 856a610eb23677..703f4eb87f9447 100644
--- a/packages/edit-site/src/components/site-editor-routes/styles-view.js
+++ b/packages/edit-site/src/components/site-editor-routes/styles-view.js
@@ -3,14 +3,25 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
 
 export const stylesViewRoute = {
 	name: 'styles-view',
 	match: ( params ) => {
-		return params.path === '/wp_global_styles' && params.canvas !== 'edit';
+		return (
+			params.path &&
+			params.path.startsWith( '/wp_global_styles' ) &&
+			params.canvas !== 'edit'
+		);
 	},
 	areas: {
+		content: <GlobalStylesUIWrapper />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath={ {} } />,
-		preview: <Editor />,
+		preview: <Editor isPreviewOnly />,
+		mobile: <GlobalStylesUIWrapper />,
+	},
+	widths: {
+		content: 380,
+		hasResize: false,
 	},
 };