From e285e93b008e185f199d8df6ebc7c81d12cbb14a Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Fri, 19 Jun 2026 09:40:10 +0200
Subject: [PATCH] fix(web): sidebar nav vertical alignment + stray list marker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nudge full-mode nav labels down 0.5px so text optically centers on
  its icon (font ascender slack made labels sit slightly high).
- Wrap bare <li> usages (Dashboard, regular-user items, public Home)
  in <ul> — a li without a ul parent kept display:list-item and
  rendered a default disc ::marker (invalid HTML).

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

diff --git a/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx b/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
index 5d15814f..681c335c 100644
--- a/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
+++ b/src/Web/autopilot-monitor-web/components/GlobalSidebar.tsx
@@ -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">{item.label}</span>
+          <span className="truncate relative top-[0.5px]">{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">{item.label}</span>
+            <span className="truncate relative top-[0.5px]">{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">{item.label}</span>
+          <span className="truncate relative top-[0.5px]">{item.label}</span>
         </button>
       </li>
     );
@@ -396,12 +396,18 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
       {isAuthenticated && (
         <>
           {/* Dashboard — hidden for regular users (no admin/operator access) */}
-          {!isRegularUser && renderGlobalItem(DASHBOARD_ITEM)}
+          {!isRegularUser && (
+            <ul className="space-y-0.5">
+              {renderGlobalItem(DASHBOARD_ITEM)}
+            </ul>
+          )}
 
           {/* Regular user: only show Progress Portal */}
           {isRegularUser && (
             <div className={`${collapseState === "full" || isMobile ? "mt-3" : "mt-1"}`}>
-              {REGULAR_USER_ITEMS.map((item) => renderGlobalItem(item))}
+              <ul className="space-y-0.5">
+                {REGULAR_USER_ITEMS.map((item) => renderGlobalItem(item))}
+              </ul>
             </div>
           )}
 
@@ -508,7 +514,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
                         }`}
                       >
                         <span className="shrink-0 w-4 h-4">{expandItem.icon}</span>
-                        <span className="truncate flex-1 text-left">{expandItem.label}</span>
+                        <span className="truncate flex-1 text-left relative top-[0.5px]">{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}
@@ -567,7 +573,9 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
       {/* Public (unauthenticated): show public nav items */}
       {!isAuthenticated && (
         <>
-          {renderGlobalItem({ id: "home", label: "Home", href: "/", icon: DASHBOARD_ITEM.icon })}
+          <ul className="space-y-0.5">
+            {renderGlobalItem({ id: "home", label: "Home", href: "/", icon: DASHBOARD_ITEM.icon })}
+          </ul>
           <div className={`${collapseState === "full" || isMobile ? "mt-3" : "mt-1"}`}>
             <ul className="space-y-0.5">
               {renderGlobalItem({ id: "docs", label: "Docs", href: "/docs", icon: <BookOpenIcon /> })}
@@ -647,7 +655,7 @@ export function GlobalSidebar({ children }: { children: ReactNode }) {
                       {group.icon ? group.icon : renderIcon(undefined, "w-4 h-4")}
                     </span>
                     {/* Group label */}
-                    <span className="truncate flex-1 text-left">{group.name}</span>
+                    <span className="truncate flex-1 text-left relative top-[0.5px]">{group.name}</span>
                     {/* Chevron */}
                     <svg
                       className={`w-3.5 h-3.5 shrink-0 text-gray-400 transition-transform duration-150 ${isExpanded ? "rotate-90" : ""}`}