From 150a197bf98609db44bf864301e546d8e570bc55 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 8 Jul 2024 14:00:27 +0200
Subject: [PATCH 1/6] Use compact variant for close butotn in complementary
 area.

---
 packages/interface/src/components/complementary-area/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index d9fa8e71acb23a..d089458b4dbbc8 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -303,7 +303,7 @@ function ComplementaryArea( {
 					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
-						size: 'small',
+						size: 'compact',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,

From c8af9d2376241cb0bdfb06616287ca124525c79c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 8 Jul 2024 14:13:05 +0200
Subject: [PATCH 2/6] Fix global styles header buttons when they show text.

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

diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
index 4ca87bf200f178..87d2161e57d951 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -75,6 +75,8 @@
 .show-icon-labels {
 	.edit-site-global-styles-sidebar__header {
 		.components-button.has-icon {
+			width: auto;
+
 			// Hide the button icons when labels are set to display...
 			svg {
 				display: none;

From 6b5aa6788146c7dada59cb3b3a3e0777b6219610 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 18 Oct 2024 15:23:18 +0200
Subject: [PATCH 3/6] Improve flexbox layout.

---
 .../components/global-styles-sidebar/index.js | 65 ++++++++++---------
 .../global-styles-sidebar/style.scss          |  4 ++
 2 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
index 90a3331d14c716..60435a7317ac89 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/index.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
+import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -130,38 +130,45 @@ export default function GlobalStylesSidebar() {
 					className="edit-site-global-styles-sidebar__header"
 					gap={ 1 }
 				>
-					<FlexBlock style={ { minWidth: 'min-content' } }>
+					<FlexItem>
 						<h2 className="edit-site-global-styles-sidebar__header-title">
 							{ __( 'Styles' ) }
 						</h2>
-					</FlexBlock>
-					<FlexItem>
-						<Button
-							icon={ seen }
-							label={ __( 'Style Book' ) }
-							isPressed={
-								isStyleBookOpened || isRevisionsStyleBookOpened
-							}
-							accessibleWhenDisabled
-							disabled={ shouldClearCanvasContainerView }
-							onClick={ toggleStyleBook }
-							size="compact"
-						/>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							label={ __( 'Revisions' ) }
-							icon={ backup }
-							onClick={ toggleRevisions }
-							accessibleWhenDisabled
-							disabled={ ! hasRevisions }
-							isPressed={
-								isRevisionsOpened || isRevisionsStyleBookOpened
-							}
-							size="compact"
-						/>
 					</FlexItem>
-					<GlobalStylesMenuSlot />
+					<Flex
+						justify="flex-end"
+						className="edit-site-global-styles-sidebar__header-actions"
+					>
+						<FlexItem>
+							<Button
+								icon={ seen }
+								label={ __( 'Style Book' ) }
+								isPressed={
+									isStyleBookOpened ||
+									isRevisionsStyleBookOpened
+								}
+								accessibleWhenDisabled
+								disabled={ shouldClearCanvasContainerView }
+								onClick={ toggleStyleBook }
+								size="compact"
+							/>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								label={ __( 'Revisions' ) }
+								icon={ backup }
+								onClick={ toggleRevisions }
+								accessibleWhenDisabled
+								disabled={ ! hasRevisions }
+								isPressed={
+									isRevisionsOpened ||
+									isRevisionsStyleBookOpened
+								}
+								size="compact"
+							/>
+						</FlexItem>
+						<GlobalStylesMenuSlot />
+					</Flex>
 				</Flex>
 			}
 		>
diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
index 87d2161e57d951..30b1fc597ad707 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -31,6 +31,10 @@
 	margin: 0;
 }
 
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
+	flex: 1;
+}
+
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;

From 245176e0afa5b0f235aa1cad55f7db376f598bc4 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 18 Oct 2024 15:44:23 +0200
Subject: [PATCH 4/6] Adjust gap.

---
 packages/edit-site/src/components/global-styles-sidebar/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
index 60435a7317ac89..2194f2edbc0f29 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/index.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -137,6 +137,7 @@ export default function GlobalStylesSidebar() {
 					</FlexItem>
 					<Flex
 						justify="flex-end"
+						gap={ 1 }
 						className="edit-site-global-styles-sidebar__header-actions"
 					>
 						<FlexItem>

From df77d504a18e03e4ea92746fd817254ae76b15d2 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 21 Oct 2024 08:56:37 +0200
Subject: [PATCH 5/6] Set button size to small.

---
 packages/interface/src/components/complementary-area/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index d089458b4dbbc8..d9fa8e71acb23a 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -303,7 +303,7 @@ function ComplementaryArea( {
 					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
-						size: 'compact',
+						size: 'small',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,

From 87277467343b0de7b15cb435d6d03486c293a170 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 21 Oct 2024 09:22:01 +0200
Subject: [PATCH 6/6] Remove no longer necessary margins.

---
 .../src/components/complementary-area-header/style.scss      | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index a6b9b532069602..2984c78c776a70 100644
--- a/packages/interface/src/components/complementary-area-header/style.scss
+++ b/packages/interface/src/components/complementary-area-header/style.scss
@@ -26,11 +26,6 @@
 
 	.components-button.has-icon {
 		display: none;
-		margin-left: auto;
-
-		~ .components-button {
-			margin-left: 0;
-		}
 
 		@include break-medium() {
 			display: flex;