From e3468f8d85bed3217b73a553c56ea3eb3fc5aa2d Mon Sep 17 00:00:00 2001
From: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Fri, 20 Sep 2024 14:42:23 -0400
Subject: [PATCH] Sites: Fix Jetpack logo misalignment in the DataViews
 Properties list (#94772)

* Fix JP logo misalignment in the DataViews Properties list.

* Widen the gap.
---
 client/components/dataviews/style.scss                     | 7 -------
 client/hosting/sites/components/sites-dataviews/index.tsx  | 4 ++--
 client/hosting/sites/components/sites-dataviews/style.scss | 7 +++++++
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/components/dataviews/style.scss b/client/components/dataviews/style.scss
index 7900c8c52da51f..cc07bce78d4d66 100644
--- a/client/components/dataviews/style.scss
+++ b/client/components/dataviews/style.scss
@@ -116,13 +116,6 @@
 			text-transform: uppercase;
 		}
 
-		svg {
-			&:not(:last-child) {
-				margin-right: 4px;
-				vertical-align: middle;
-			}
-		}
-
 		.dataviews-view-table-header-button {
 			color: inherit;
 		}
diff --git a/client/hosting/sites/components/sites-dataviews/index.tsx b/client/hosting/sites/components/sites-dataviews/index.tsx
index 2f014031e75161..866179f8f5f82a 100644
--- a/client/hosting/sites/components/sites-dataviews/index.tsx
+++ b/client/hosting/sites/components/sites-dataviews/index.tsx
@@ -161,10 +161,10 @@ const DotcomSitesDataViews = ( {
 				id: 'stats',
 				// @ts-expect-error -- Need to fix the label type upstream in @wordpress/dataviews to support React elements.
 				label: (
-					<>
+					<span className="sites-dataviews__stats-label">
 						<JetpackLogo size={ 16 } />
 						<span>{ __( 'Stats' ) }</span>
-					</>
+					</span>
 				),
 				render: ( { item }: { item: SiteExcerptData } ) => <SiteStats site={ item } />,
 				enableHiding: false,
diff --git a/client/hosting/sites/components/sites-dataviews/style.scss b/client/hosting/sites/components/sites-dataviews/style.scss
index 3b95622b54d3da..eabdeac155385e 100644
--- a/client/hosting/sites/components/sites-dataviews/style.scss
+++ b/client/hosting/sites/components/sites-dataviews/style.scss
@@ -134,3 +134,10 @@
 .sites-overview__content .dataviews-wrapper .dataviews-filters__view-actions .components-h-stack button:nth-of-type(3) {
 	display: none;
 }
+
+// Style the Stats label that includes the Jetpack logo
+.sites-dataviews__stats-label {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}