Fix navigation screen padding

Author: andrewserong

packages/block-editor/src/components/content-only-controls/index.js

@@ -158,7 +158,7 @@ function ContentOnlyControlsScreen( {
 	}
 
 	return (
-		<div className="block-editor-content-only-controls__screen">
+		<>
 			{ isNested && (
 				<div className="block-editor-content-only-controls__button-panel">
 					<Navigator.BackButton className="block-editor-content-only-controls__back-button">
@@ -182,7 +182,7 @@ function ContentOnlyControlsScreen( {
 
 				return <BlockFields key={ clientId } clientId={ clientId } />;
 			} ) }
-		</div>
+		</>
 	);
 }
 
@@ -268,15 +268,22 @@ export default function ContentOnlyControls( { rootClientId } ) {
 
 	return (
 		<Navigator initialPath="/">
-			<Navigator.Screen path="/">
+			<Navigator.Screen
+				path="/"
+				className="block-editor-content-only-controls__screen"
+			>
 				<ContentOnlyControlsScreen
 					rootClientId={ updatedRootClientId ?? rootClientId }
 					contentClientIds={ contentClientIds }
 					parentClientIds={ nestedContentClientIds }
 				/>
 			</Navigator.Screen>
 			{ Object.keys( nestedContentClientIds ).map( ( clientId ) => (
-				<Navigator.Screen key={ clientId } path={ `/${ clientId }` }>
+				<Navigator.Screen
+					key={ clientId }
+					path={ `/${ clientId }` }
+					className="block-editor-content-only-controls__screen"
+				>
 					<ContentOnlyControlsScreen
 						isNested
 						rootClientId={ clientId }

packages/block-editor/src/components/content-only-controls/styles.scss

@@ -5,7 +5,9 @@
 @use "./rich-text/styles.scss" as *;
 
 .block-editor-content-only-controls__screen {
-	padding-top: $grid-unit-10;
+	&.components-navigator-screen {
+		padding: $grid-unit-10 0 0 0;
+	}
 
 	// Add border for the entire content controls and remove the similar border
 	// for tools panel.