From 9b8ae08460da301010f2114dae88a4463e7493bf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 17:07:00 +0100
Subject: [PATCH] fix: center all sidebar icons with uniform 28px containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every interactive item (logo, site picker, nav links, settings,
collapse) now wraps its icon in a 28px flex container. Combined with
consistent px-2 outer + px-2.5 inner padding, all icon containers
start at exactly 18px from the sidebar edge and center at 32px — the
midpoint of the 64px collapsed sidebar.
---
 components/dashboard/Sidebar.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index ac6dd28..7499a5b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -188,7 +188,9 @@ function NavLink({
           : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
       }`}
     >
-      <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
+      <span className="w-7 h-7 flex items-center justify-center shrink-0">
+        <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+      </span>
       <Label collapsed={collapsed}>{item.label}</Label>
     </Link>
   )
@@ -238,8 +240,10 @@ export default function Sidebar({
     return (
       <div className="flex flex-col h-full overflow-hidden">
         {/* Logo — fixed layout, text fades */}
-        <Link href="/" className="flex items-center gap-3 px-4 py-5 shrink-0 group overflow-hidden">
-          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+        <Link href="/" className="flex items-center gap-2.5 px-[18px] py-5 shrink-0 group overflow-hidden">
+          <span className="w-7 h-7 flex items-center justify-center shrink-0">
+            <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-7 h-7 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+          </span>
           <span className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
             Pulse
           </span>
@@ -277,7 +281,9 @@ export default function Sidebar({
               className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
               title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
             >
-              <CollapseLeftIcon className={`w-[18px] h-[18px] shrink-0 transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+              <span className="w-7 h-7 flex items-center justify-center shrink-0">
+                <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+              </span>
               <Label collapsed={c}>Collapse</Label>
             </button>
           )}