From bb48250467e17a8762e8580f541615e5983dc868 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 11 Jul 2025 04:16:36 +0530
Subject: [PATCH] [WEB-4477] fix: sidebar resize behaviour #7386

---
 .../components/sidebar/resizable-sidebar.tsx  | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
index 64ae3f56f..ddfd2ef9f 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -50,6 +50,8 @@ export function ResizableSidebar({
   const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
   // refs
   const peekTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const initialWidthRef = useRef<number>(0);
+  const initialMouseXRef = useRef<number>(0);
 
   // handlers
   const setShowPeek = useCallback(
@@ -62,15 +64,22 @@ export function ResizableSidebar({
   const handleResize = useCallback(
     (e: MouseEvent) => {
       if (!isResizing) return;
-      const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
+
+      const deltaX = e.clientX - initialMouseXRef.current;
+      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaX, minWidth), maxWidth);
       setWidth(newWidth);
     },
     [isResizing, minWidth, maxWidth, setWidth]
   );
 
-  const startResizing = useCallback(() => {
-    setIsResizing(true);
-  }, []);
+  const startResizing = useCallback(
+    (e: React.MouseEvent) => {
+      setIsResizing(true);
+      initialWidthRef.current = width;
+      initialMouseXRef.current = e.clientX;
+    },
+    [width]
+  );
 
   const stopResizing = useCallback(() => {
     setIsResizing(false);
@@ -199,7 +208,7 @@ export function ResizableSidebar({
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col pt-3",
+            "group/sidebar h-full w-full bg-custom-sidebar-background-100 overflow-hidden relative flex flex-col pt-3",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -215,7 +224,7 @@ export function ResizableSidebar({
             )}
             // onDoubleClick toggle sidebar
             onDoubleClick={() => toggleCollapsed()}
-            onMouseDown={startResizing}
+            onMouseDown={(e) => startResizing(e)}
             role="separator"
             aria-label="Resize sidebar"
           />
@@ -273,7 +282,7 @@ export function ResizableSidebar({
             )}
             // onDoubleClick toggle sidebar
             onDoubleClick={() => toggleCollapsed()}
-            onMouseDown={startResizing}
+            onMouseDown={(e) => startResizing(e)}
             role="separator"
             aria-label="Resize sidebar"
           />