From b676e91bc49aeeb76843f8dc37bf88dab7d4b56c Mon Sep 17 00:00:00 2001
From: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Thu, 12 Sep 2024 09:15:07 -0400
Subject: [PATCH] Jetpack-mu-wpcom: Fix admin bar reader item padding (#39357)

* Remove padding from Reader item and correct Help Center item width.

* changelog
---
 .../fix-admin-bar-reader-padding-width        |  4 +++
 .../wpcom-admin-bar/wpcom-admin-bar.scss      | 33 ++++++++++++-------
 2 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/fix-admin-bar-reader-padding-width

diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-admin-bar-reader-padding-width b/projects/packages/jetpack-mu-wpcom/changelog/fix-admin-bar-reader-padding-width
new file mode 100644
index 0000000000000..69e7815d06317
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/fix-admin-bar-reader-padding-width
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Remove the extra padding around the admin bar Reader item to match Calypso.
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
index 698b5378ba878..79fded05804d6 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
+++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss
@@ -165,27 +165,38 @@
 
 			#wp-admin-bar-reader {
 				display: block;
-				width: auto !important;
-				min-width: 52px;
-				padding: 0px;
 
-				.ab-icon {
+				.ab-item {
+					display: flex;
 					justify-content: center;
-					padding: 0px 10px;
 
-					&:before {
-						width: 36px;
-						height: 36px;
-						margin: 0px;
-						mask-size: contain;
+					.ab-icon {
+						justify-content: center;
+						padding: 0px;
+	
+						&:before {
+							width: 36px;
+							height: 36px;
+							margin: 0px;
+							mask-size: contain;
+						}
 					}
 				}
 			}
 
 			#wp-admin-bar-help-center {
 				display: block !important;
-				width: 49px !important;
 				margin-right: 0 !important;
+				width: 52px !important;
+
+				.ab-item {
+					display: flex;
+					justify-content: center;
+
+					svg {
+						position: relative;
+					}
+				}
 			}
 
 			#wp-admin-bar-notes {