diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 42de512ea16cdc..9d0b545d199002 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -22,46 +22,68 @@ import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
 
+function GlobalStylesNavigationScreen( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ [
+				'edit-site-global-styles-sidebar__navigator-screen',
+				className,
+			]
+				.filter( Boolean )
+				.join( ' ' ) }
+			{ ...props }
+		/>
+	);
+}
+
 function ContextScreens( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
-			<NavigatorScreen path={ parentMenu + '/typography' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
 				<ScreenTypography name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/text' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/text' }
+			>
 				<ScreenTypographyElement name={ name } element="text" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/link' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/link' }
+			>
 				<ScreenTypographyElement name={ name } element="link" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/palette' }
+			>
 				<ScreenColorPalette name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/background' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/background' }
+			>
 				<ScreenBackgroundColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/text' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/link' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
 				<ScreenLinkColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/layout' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 		</>
 	);
 }
@@ -70,22 +92,25 @@ function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 
 	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath="/"
+		>
+			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path="/blocks">
+			<GlobalStylesNavigationScreen path="/blocks">
 				<ScreenBlockList />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
-				<NavigatorScreen
+				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
 					path={ '/blocks/' + block.name }
 				>
 					<ScreenBlock name={ block.name } />
-				</NavigatorScreen>
+				</GlobalStylesNavigationScreen>
 			) ) }
 
 			<ContextScreens />
diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js
index d1a1d0aa09b18f..ea494a67b6390c 100644
--- a/packages/edit-site/src/components/sidebar/default-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/default-sidebar.js
@@ -15,6 +15,7 @@ export default function DefaultSidebar( {
 	closeLabel,
 	header,
 	headerClassName,
+	panelClassName,
 } ) {
 	return (
 		<>
@@ -27,6 +28,7 @@ export default function DefaultSidebar( {
 				closeLabel={ closeLabel }
 				header={ header }
 				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
 			>
 				{ children }
 			</ComplementaryArea>
diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
index add957375f1e27..06a5aff0d96580 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -24,6 +24,7 @@ export default function GlobalStylesSidebar() {
 			title={ __( 'Styles' ) }
 			icon={ styles }
 			closeLabel={ __( 'Close global styles sidebar' ) }
+			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex>
 					<FlexBlock>
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index b6189e4d914417..65b81b4474af39 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -17,6 +17,23 @@
 	}
 }
 
+.edit-site-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	&__panel,
+	&__navigator-provider {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+	}
+
+	&__navigator-screen {
+		flex: 1;
+	}
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }