From d5cb476e2c78b1dabee726461fe237544e002383 Mon Sep 17 00:00:00 2001
From: Philip Jackson <p-jackson@live.com>
Date: Tue, 30 Jun 2026 13:17:22 +1200
Subject: [PATCH] Help Center: align/size admin-bar Help icon consistently

Port wp-calypso#111737: tweak SVG viewBox (desktop values in markup) and
scale down at <=782px to reproduce the mobile viewBox. Concentric viewBoxes
make a centered CSS scale exact, so no markup/ID changes or JS.
---
 .../changelog/fix-mu-wpcom-help-center-icon-sizing   |  4 ++++
 .../src/features/help-center/class-help-center.php   | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/fix-mu-wpcom-help-center-icon-sizing

diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-mu-wpcom-help-center-icon-sizing b/projects/packages/jetpack-mu-wpcom/changelog/fix-mu-wpcom-help-center-icon-sizing
new file mode 100644
index 000000000000..99e081087788
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/fix-mu-wpcom-help-center-icon-sizing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Help Center: align and size the admin-bar Help icon consistently across viewports
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center.php b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center.php
index 8a405d358700..72f473e774c7 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center.php
+++ b/projects/packages/jetpack-mu-wpcom/src/features/help-center/class-help-center.php
@@ -201,10 +201,10 @@ function ( $wp_admin_bar ) {
 					$wp_admin_bar->add_menu(
 						array(
 							'id'     => 'help-center',
-							'title'  => '<span title="' . __( 'Help Center', 'jetpack-mu-wpcom' ) . '"><svg id="help-center-icon" class="ab-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+							'title'  => '<span title="' . __( 'Help Center', 'jetpack-mu-wpcom' ) . '"><svg id="help-center-icon" class="ab-icon" width="24" height="24" viewBox="1.5 1.5 21 21" xmlns="http://www.w3.org/2000/svg">
 												<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 16v-2h2v2h-2zm2-3v-1.141A3.991 3.991 0 0016 10a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2z" />
 											</svg>
-											<svg id="help-center-icon-with-notification" class="ab-icon"  width="24" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+											<svg id="help-center-icon-with-notification" class="ab-icon"  width="24" height="24" viewBox="-1 -1 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 												<path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM13 18H11V16H13V18ZM13 13.859V15H11V13C11 12.448 11.448 12 12 12C13.103 12 14 11.103 14 10C14 8.897 13.103 8 12 8C10.897 8 10 8.897 10 10H8C8 7.791 9.791 6 12 6C14.209 6 16 7.791 16 10C16 11.862 14.722 13.413 13 13.859Z" fill="currentColor"/>
 												<circle cx="20" cy="3.5" r="4.3" fill="#e65054" stroke="#1d2327" stroke-width="2"/>
 											</svg>
@@ -264,6 +264,14 @@ function ( $wp_admin_bar ) {
 			$version
 		);
 
+		// The admin-bar Help Center icons carry their desktop viewBox in markup so the glyph
+		// aligns/sizes consistently with the other icons. The desktop and mobile viewBoxes are
+		// concentric, so the mobile appearance is reproduced by scaling about the icon's centre.
+		wp_add_inline_style(
+			'help-center-' . $variant . '-style',
+			'@media (max-width:782px){#help-center-icon{transform:scale(0.875)}#help-center-icon-with-notification{transform:scale(0.8667)}}'
+		);
+
 		// In the block editor the Help Center is already present in the editor toolbar
 		// via SlotFill at viewports >= 600px. Hide the admin bar item at those widths
 		// to avoid showing it in two places; keep it visible on mobile where the admin