Update site hub action positioning (WordPress#60511)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
bph · Apr 5, 2024 · 7245ed5 · 7245ed5
1 parent 8305546
commit 7245ed5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -15,7 +15,7 @@
 	z-index: z-index(".edit-site-layout__hub");
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-30});
+		width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
 	}
 
 	.edit-site-layout.is-full-canvas & {

diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
@@ -156,25 +156,32 @@ const SiteHub = memo( ( { isTransparent, className } ) => {
 							<div className="edit-site-site-hub__title">
 								{ decodeEntities( siteTitle ) }
 							</div>
+							<HStack
+								spacing={ 0 }
+								expanded={ false }
+								className="edit-site-site-hub__actions"
+							>
+								<Button
+									href={ homeUrl }
+									target="_blank"
+									label={ __(
+										'View site (opens in a new tab)'
+									) }
+									aria-label={ __(
+										'View site (opens in a new tab)'
+									) }
+									icon={ external }
+									className="edit-site-site-hub__site-view-link"
+								/>
 
-							<Button
-								href={ homeUrl }
-								target="_blank"
-								label={ __( 'View site (opens in a new tab)' ) }
-								aria-label={ __(
-									'View site (opens in a new tab)'
-								) }
-								icon={ external }
-								className="edit-site-site-hub__site-view-link"
-							/>
-
-							<Button
-								className="edit-site-site-hub_toggle-command-center"
-								icon={ search }
-								onClick={ () => openCommandCenter() }
-								label={ __( 'Open command palette' ) }
-								shortcut={ displayShortcut.primary( 'k' ) }
-							/>
+								<Button
+									className="edit-site-site-hub_toggle-command-center"
+									icon={ search }
+									onClick={ () => openCommandCenter() }
+									label={ __( 'Open command palette' ) }
+									shortcut={ displayShortcut.primary( 'k' ) }
+								/>
+							</HStack>
 						</HStack>
 					) }
 				</AnimatePresence>

diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
@@ -3,7 +3,10 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
-	overflow: hidden;
+}
+
+.edit-site-site-hub__actions {
+	flex-shrink: 0;
 }
 
 .edit-site-site-hub__view-mode-toggle-container {
@@ -29,7 +32,6 @@
 }
 
 .edit-site-site-hub__site-view-link {
-	flex-grow: 0;
 	margin-right: var(--wp-admin-border-width-focus);
 	svg {
 		fill: $gray-200;