From 04c2482f331995d06d912e7ae76ca52ced331377 Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Fri, 19 Jun 2026 10:26:22 +0200
Subject: [PATCH] fix(web): vertically center sidebar nav icons (root cause)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The real misalignment was the icon, not the label. Nav icons are
created without a className (e.g. <HomeIcon/>), so each SVG keeps its
component default w-5 h-5 (20px) while the wrapper span only sized the
span to w-4 h-4 (16px). A 20px inline, baseline-aligned SVG inside a
16px box does not sit at the box's vertical center, so it never lined
up with the adjacent text — and no label nudge could fix that.

Make each icon wrapper an inline-flex with items-center so the SVG is
centered as a (blockified) flex item, independent of the size mismatch
and free of inline-baseline offset. Drop the earlier 1px label nudges,
which compensated the wrong element.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/GlobalSidebar.tsx              | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx b/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
index 941510a7..bdba7e77 100644
--- a/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
+++ b/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
@@ -271,7 +271,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
   // --- Render helpers ---
 
   const renderIcon = (icon: ReactNode | undefined, sizeClass = "w-4 h-4") => {
-    if (icon) return <span className={`shrink-0 ${sizeClass}`}>{icon}</span>;
+    if (icon) return <span className={`shrink-0 inline-flex items-center ${sizeClass}`}>{icon}</span>;
     return <DefaultSectionIcon className={`shrink-0 ${sizeClass}`} />;
   };
 
@@ -322,7 +322,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
       <li key={item.id}>
         <Link href={item.href} onClick={() => setMobileDrawerOpen(false)} className={`${base} px-3 py-1.5`}>
           {renderIcon(item.icon, "w-4 h-4")}
-          <span className="truncate relative top-px">{item.label}</span>
+          <span className="truncate">{item.label}</span>
         </Link>
       </li>
     );
@@ -367,7 +367,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
         <li key={item.id}>
           <Link href={item.href} onClick={() => setMobileDrawerOpen(false)} className={`${base} px-3 py-1.5`}>
             {renderIcon(item.icon, "w-4 h-4")}
-            <span className="truncate relative top-px">{item.label}</span>
+            <span className="truncate">{item.label}</span>
           </Link>
         </li>
       );
@@ -377,7 +377,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
       <li key={item.id}>
         <button onClick={() => scrollTo(item.id)} className={`${base} w-full text-left px-3 py-1.5`}>
           {renderIcon(item.icon, "w-4 h-4")}
-          <span className="truncate relative top-px">{item.label}</span>
+          <span className="truncate">{item.label}</span>
         </button>
       </li>
     );
@@ -489,7 +489,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
                           }`}
                           title={expandItem.label}
                         >
-                          <span className="shrink-0 w-4.5 h-4.5">{expandItem.icon}</span>
+                          <span className="shrink-0 inline-flex items-center justify-center w-4.5 h-4.5">{expandItem.icon}</span>
                           <span className="absolute left-full ml-2 px-2 py-1 rounded bg-gray-900 text-white text-xs whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity z-50 dark:bg-gray-700">
                             {expandItem.label}
                           </span>
@@ -513,8 +513,8 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
                               : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                         }`}
                       >
-                        <span className="shrink-0 w-4 h-4">{expandItem.icon}</span>
-                        <span className="truncate flex-1 text-left relative top-px">{expandItem.label}</span>
+                        <span className="shrink-0 inline-flex items-center w-4 h-4">{expandItem.icon}</span>
+                        <span className="truncate flex-1 text-left">{expandItem.label}</span>
                         <svg
                           className={`w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-150 ${isExpanded ? "rotate-90" : ""}`}
                           fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
@@ -628,7 +628,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
                       }`}
                       title={group.name}
                     >
-                      <span className="shrink-0 w-4.5 h-4.5">
+                      <span className="shrink-0 inline-flex items-center justify-center w-4.5 h-4.5">
                         {group.icon ? group.icon : renderIcon(undefined, "w-4.5 h-4.5")}
                       </span>
                       <span className="absolute left-full ml-2 px-2 py-1 rounded bg-gray-900 text-white text-xs whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity z-50 dark:bg-gray-700">
@@ -651,11 +651,11 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
                     }`}
                   >
                     {/* Group icon */}
-                    <span className="shrink-0 w-4 h-4">
+                    <span className="shrink-0 inline-flex items-center w-4 h-4">
                       {group.icon ? group.icon : renderIcon(undefined, "w-4 h-4")}
                     </span>
                     {/* Group label */}
-                    <span className="truncate flex-1 text-left relative top-px">{group.name}</span>
+                    <span className="truncate flex-1 text-left">{group.name}</span>
                     {/* Chevron */}
                     <svg
                       className={`w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-150 ${isExpanded ? "rotate-90" : ""}`}