From 61ce505ee53309b86928e92d50815c975619f29a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 15:34:48 +0100
Subject: [PATCH] fix: pin sidebar to viewport with sticky positioning

Sidebar was scrolling with page content. Fix by adding sticky top-0
h-screen. Widen collapsed width to 68px to prevent icon clipping.
---
 components/dashboard/DashboardShell.tsx | 4 ++--
 components/dashboard/Sidebar.tsx        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 0488ba5..a2aeb3c 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -13,9 +13,9 @@ export default function DashboardShell({
   const { mobileOpen, closeMobile } = useSidebar()
 
   return (
-    <div className="flex flex-1 min-h-0">
+    <div className="flex flex-1">
       <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
-      <main className="flex-1 min-w-0 overflow-auto pb-8">
+      <main className="flex-1 min-w-0 pb-8">
         {children}
       </main>
     </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 34e9f9c..ad08a1d 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -319,8 +319,8 @@ export default function Sidebar({
 
       {/* Desktop sidebar */}
       <aside
-        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
-          collapsed ? 'w-16' : 'w-60'
+        className={`hidden lg:flex flex-col shrink-0 sticky top-0 h-screen border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
+          collapsed ? 'w-[68px]' : 'w-60'
         }`}
       >
         {sidebarContent(false)}