From 8aa998526984a3e9d547cd638840f8314bad9d81 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 17 Oct 2024 12:24:21 +0100
Subject: [PATCH] Update site icon and title position (#66171)

Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 packages/edit-site/src/components/layout/style.scss   | 4 ++--
 packages/edit-site/src/components/site-hub/index.js   | 4 ++--
 packages/edit-site/src/components/site-hub/style.scss | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 27a3f7b99bf7e..2c7e6ce1b10c8 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -210,8 +210,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
-		height: $grid-unit-80;
-		width: $grid-unit-80;
+		height: $header-height;
+		width: $header-height;
 		justify-content: center;
 		align-items: center;
 	}
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 8cb3502493cff..3f34b8bd1cccb 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -68,7 +68,7 @@ const SiteHub = memo(
 							label={ __( 'Go to the Dashboard' ) }
 							className="edit-site-layout__view-mode-toggle"
 							style={ {
-								transform: 'scale(0.5)',
+								transform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge
 								borderRadius: 4,
 							} }
 						>
@@ -99,7 +99,7 @@ const SiteHub = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
-								__next40pxDefaultSize
+								size="compact"
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 7fae845d4d203..b1c1a3a41cc53 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -4,6 +4,7 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 	margin-right: $grid-unit-15;
+	height: $grid-unit-70;
 }
 
 .edit-site-site-hub__actions {
@@ -29,6 +30,9 @@
 	overflow: hidden;
 	// Add space for the ↗ to render.
 	padding-right: $grid-unit-20;
+
+	// Create 12px gap between site icon and site title
+	margin-left: - $grid-unit-05;
 	position: relative;
 	text-decoration: none;
 	text-overflow: ellipsis;