From 0711717b8a6586212e5a2da03cc34ba92dba0e91 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 22 Oct 2024 08:52:13 +0200
Subject: [PATCH] Fix Global styles panel header buttons text overlap for 'Show
 button text labels' (#63243)

* Use compact variant for close butotn in complementary area.

* Fix global styles header buttons when they show text.

* Improve flexbox layout.

* Adjust gap.

* Set button size to small.

* Remove no longer necessary margins.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
---
 .../components/global-styles-sidebar/index.js | 66 +++++++++++--------
 .../global-styles-sidebar/style.scss          |  6 ++
 .../complementary-area-header/style.scss      |  5 --
 3 files changed, 43 insertions(+), 34 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 90a3331d14c71..2194f2edbc0f2 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,46 @@ 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"
+						gap={ 1 }
+						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 4ca87bf200f17..30b1fc597ad70 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;
@@ -75,6 +79,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;
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index a6b9b53206960..2984c78c776a7 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;