Fix Global styles panel header buttons text overlap for 'Show button …

…text labels' (WordPress#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 <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]>
karthick-murugan · Nov 13, 2024 · 1c7a7fe · 1c7a7fe
1 parent bca2b58
commit 1c7a7fe
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 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
@@ -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
@@ -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
@@ -26,11 +26,6 @@
 
 	.components-button.has-icon {
 		display: none;
-		margin-left: auto;
-
-		~ .components-button {
-			margin-left: 0;
-		}
 
 		@include break-medium() {
 			display: flex;