From a88f3c26dfb4543d999b004f6357d56061a1823c Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Thu, 1 Jun 2023 12:17:34 +0300
Subject: [PATCH] Fix styling of actions in site editor navigation sidebar
 (#51153)

---
 .../sidebar-navigation-screen-global-styles/index.js        | 4 ++--
 .../src/components/sidebar-navigation-screen-page/index.js  | 4 ++--
 .../components/sidebar-navigation-screen-template/index.js  | 4 ++--
 .../src/components/sidebar-navigation-screen/index.js       | 6 +++++-
 .../src/components/sidebar-navigation-screen/style.scss     | 4 ++++
 5 files changed, 15 insertions(+), 7 deletions(-)

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 9fd87521806194..8e6f080e74a80a 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
@@ -118,7 +118,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				) }
 				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				actions={
-					<div>
+					<>
 						{ ! isMobileViewport && (
 							<SidebarButton
 								icon={ seen }
@@ -138,7 +138,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 							label={ __( 'Edit styles' ) }
 							onClick={ async () => await openGlobalStyles() }
 						/>
-					</div>
+					</>
 				}
 			/>
 			{ isStyleBookOpened && ! isMobileViewport && (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
index 2404217dcd81ac..5e0c113b3544ad 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -79,7 +79,7 @@ export default function SidebarNavigationScreenPage() {
 				record?.title?.rendered || __( '(no title)' )
 			) }
 			actions={
-				<div>
+				<>
 					<PageActions
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
@@ -92,7 +92,7 @@ export default function SidebarNavigationScreenPage() {
 						label={ __( 'Edit' ) }
 						icon={ pencil }
 					/>
-				</div>
+				</>
 			}
 			meta={
 				<ExternalLink
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
index b52cf524c6160c..03cc7ecbec75bf 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -92,7 +92,7 @@ export default function SidebarNavigationScreenTemplate() {
 		<SidebarNavigationScreen
 			title={ title }
 			actions={
-				<div>
+				<>
 					<TemplateActions
 						postType={ postType }
 						postId={ postId }
@@ -106,7 +106,7 @@ export default function SidebarNavigationScreenTemplate() {
 						label={ __( 'Edit' ) }
 						icon={ pencil }
 					/>
-				</div>
+				</>
 			}
 			description={ description }
 		/>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index 0baac6278c4307..67e22721e78f0b 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -83,7 +83,11 @@ export default function SidebarNavigationScreen( {
 								title
 						  ) }
 				</Heading>
-				{ actions }
+				{ actions && (
+					<div className="edit-site-sidebar-navigation-screen__actions">
+						{ actions }
+					</div>
+				) }
 			</HStack>
 			{ meta && (
 				<>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 81508a7709d942..111b2650e41256 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -57,6 +57,10 @@
 	padding: $grid-unit-15 * 0.5 0 0 0;
 }
 
+.edit-site-sidebar-navigation-screen__actions {
+	flex-shrink: 0;
+}
+
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
 	.edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;