From d00d2e55925553efb1bcafad89e682bd041e4486 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:04:50 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20sidebar=20polish=20=E2=80=94=20logo,=20s?=
 =?UTF-8?q?crollbar,=20utility=20bar=20height,=20icon=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix stretched logo with object-contain
- Remove border below logo
- Add overflow-hidden to prevent scrollbar flash during transition
- Match utility bar height to old header (py-3.5)
- Remove transition-colors from active nav items to prevent white flash
---
 components/dashboard/Sidebar.tsx    | 10 +++++-----
 components/dashboard/UtilityBar.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b478151..b1058e0 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -199,12 +199,12 @@ function NavItemLink({
       href={href}
       onClick={onClick}
       title={collapsed ? item.label : undefined}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors ${
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
         collapsed ? 'justify-center' : ''
       } ${
         isActive
           ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors'
       }`}
     >
       <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
@@ -252,16 +252,16 @@ export default function Sidebar({
     const isCollapsed = isMobile ? false : collapsed
 
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full overflow-hidden">
         {/* Logo */}
         <Link
           href="/"
-          className={`flex items-center gap-2.5 px-4 py-4 border-b border-neutral-200 dark:border-neutral-800 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
+          className={`flex items-center gap-2.5 px-4 py-4 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
         >
           <img
             src="/pulse_icon_no_margins.png"
             alt="Pulse"
-            className="w-8 h-8 shrink-0"
+            className="w-8 h-8 shrink-0 object-contain"
           />
           {!isCollapsed && (
             <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/UtilityBar.tsx
index 6024512..7c9f01e 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/UtilityBar.tsx
@@ -67,7 +67,7 @@ export default function UtilityBar() {
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-2">
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
       {/* Left: mobile sidebar toggle */}
       <button
         onClick={openMobile}