gsadmin/AutopilotMonitor
1
0
Fork 0
mirror of https://github.com/okieselbach/AutopilotMonitor.git synced 2026-10-24 12:42:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): vertically center sidebar nav icons (root cause)

Browse Source 
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>
This commit is contained in:
Oliver Kieselbach
2026-06-19 10:26:22 +02:00
parent a60ef54a23
commit 04c2482f33
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
+10 -10
View File
@@ -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" : ""}`}