Jetpack-mu-wpcom: Fix admin bar reader item padding (#39357)

* Remove padding from Reader item and correct Help Center item width. * changelog
Automattic · Sep 12, 2024 · b676e91 · b676e91
1 parent 5db2bb3
commit b676e91
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
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
@@ -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
@@ -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 {