From 3d975694201118e3eafa2325325164d6b75cd5fd Mon Sep 17 00:00:00 2001
From: bonheur15 <rumanzibonheur@gmail.com>
Date: Mon, 24 Aug 2026 23:50:06 +0200
Subject: [PATCH] fix web sidebar scrolling

---
 apps/web/src/components/layout/Sidebar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index 23bec9b..f2cd796 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -57,11 +57,11 @@ export function Sidebar({ mobileOpen, onCloseMobile }: SidebarProps) {
 
       <aside
         className={cn(
-          'fixed inset-y-0 left-0 z-40 flex w-64 shrink-0 flex-col border-r border-border bg-card transition-transform duration-200 lg:static lg:translate-x-0',
+          'fixed inset-y-0 left-0 z-40 flex w-64 shrink-0 flex-col overflow-hidden border-r border-border bg-card transition-transform duration-200 lg:sticky lg:top-0 lg:h-dvh lg:self-start lg:translate-x-0',
           mobileOpen ? 'translate-x-0' : '-translate-x-full',
         )}
       >
-        <div className="flex h-16 items-center justify-between gap-2 border-b border-border px-5">
+        <div className="flex h-16 shrink-0 items-center justify-between gap-2 border-b border-border px-5">
           <NavLink to="/dashboard" className="flex items-center gap-2.5">
             <img
               src="/docksight.png"
@@ -84,7 +84,7 @@ export function Sidebar({ mobileOpen, onCloseMobile }: SidebarProps) {
           </Button>
         </div>
 
-        <nav className="flex-1 space-y-0.5 overflow-y-auto p-3">
+        <nav className="min-h-0 flex-1 space-y-0.5 overflow-y-auto p-3">
           <p className="px-3 pb-2 pt-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
             Platform
           </p>
@@ -133,7 +133,7 @@ function SidebarFooter() {
   const user = useAuthStore((state) => state.user)
 
   return (
-    <div className="border-t border-border p-3">
+    <div className="shrink-0 border-t border-border p-3">
       <div className="flex items-center gap-3 rounded-md px-2 py-2">
         <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
           {initialsFor(user?.email)}