From 82a7024d486544be9bc473251c92ccdc44fc83fa Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Thu, 25 May 2023 10:41:37 +1200
Subject: [PATCH] Move hover style up one level and remove gap

---
 .../src/components/site-hub/index.js          |  6 ++-
 .../src/components/site-hub/style.scss        | 39 ++++++++++---------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index b0ea857d5894d5..9d61784bed8556 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -92,7 +92,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack justify="space-between" alignment="center">
+			<HStack
+				justify="space-between"
+				alignment="center"
+				className="edit-site-site-hub__container"
+			>
 				<HStack
 					justify="flex-start"
 					className="edit-site-site-hub__text-content"
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index d38ca4068b36b2..cc2254a6231ee3 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -3,22 +3,11 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: $grid-unit-10;
-}
-
-.edit-site-site-hub__post-type {
-	opacity: 0.6;
-}
 
-.edit-site-site-hub__view-mode-toggle-container {
-	height: $header-height;
-	width: $header-height;
-	flex-shrink: 0;
-	background: $gray-900;
-}
+	.edit-site-site-hub__container {
+		gap: 0;
+	}
 
-.edit-site-site-hub__text-content {
-	// Necessary for the ellipsis to work.
-	overflow: hidden;
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
 		@include break-mobile() {
@@ -28,6 +17,7 @@
 		&:focus {
 			outline: none;
 			box-shadow: none;
+			opacity: 1;
 		}
 		svg {
 			fill: $white;
@@ -38,11 +28,22 @@
 			opacity: 1;
 		}
 	}
-	&:focus {
-		.edit-site-site-hub__site-view-link {
-			opacity: 1;
-		}
-	}
+}
+
+.edit-site-site-hub__post-type {
+	opacity: 0.6;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+	background: $gray-900;
+}
+
+.edit-site-site-hub__text-content {
+	// Necessary for the ellipsis to work.
+	overflow: hidden;
 }
 
 .edit-site-site-hub__title {