zoom issue: replace resizable with a simple (#1097)

## Description

Replaced the `react-resizable-panels` library with a custom resize handle implementation for the context panel. This change removes the dependency on the external library and implements a simpler, more controlled resizing mechanism.

It helps to keep work area a const width, preventing any issues with `fitView`.

## Type of Change

- [x] Bugfix
- [x] Improvement
- [x] Cleanup/Refactor

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Test Instructions

[Screen Recording 2025-10-15 at 12.16.34 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/b9d4c2b3-0bdb-4264-931e-b6a9dcb1fac7.mov" />](https://app.graphite.dev/user-attachments/video/b9d4c2b3-0bdb-4264-931e-b6a9dcb1fac7.mov)

1. Open the Pipeline Editor and verify that the context panel can be resized by dragging the handle
2. Confirm that the resize handle has proper constraints (min-width: 200px, max-width: 600px)
3. Check that the Pipeline Run page also has the same resizing functionality
4. Verify that the UI appearance and behavior remains consistent with the previous implementation

Author: maxy-shpfy

package-lock.json

@@ -87,7 +87,6 @@
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
     "react-icons": "^5.5.0",
-    "react-resizable-panels": "^3.0.6",
     "react-scan": "^0.4.3",
     "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.3.1",

package.json

@@ -10,11 +10,7 @@ import {
   FlowSidebar,
 } from "@/components/shared/ReactFlow";
 import { UndoRedo } from "@/components/shared/UndoRedo";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
 import { AutoSaveProvider } from "@/providers/AutoSaveProvider";
 import { ComponentLibraryProvider } from "@/providers/ComponentLibraryProvider";
@@ -70,8 +66,9 @@ const PipelineEditor = () => {
             <ForcedSearchProvider>
               <ComponentLibraryProvider>
                 <FlowSidebar />
-                <ResizablePanelGroup direction="horizontal">
-                  <ResizablePanel>
+
+                <InlineStack className="w-full h-full" align="start">
+                  <BlockStack className="flex-1 h-full">
                     <div className="reactflow-wrapper relative">
                       <FlowCanvas {...flowConfig}>
                         <MiniMap position="bottom-left" pannable />
@@ -88,10 +85,9 @@ const PipelineEditor = () => {
                         <UndoRedo />
                       </div>
                     </div>
-                  </ResizablePanel>
-                  <ResizableHandle />
+                  </BlockStack>
                   <CollapsibleContextPanel />
-                </ResizablePanelGroup>
+                </InlineStack>
               </ComponentLibraryProvider>
             </ForcedSearchProvider>
           </ContextPanelProvider>

src/components/Editor/PipelineEditor.tsx

@@ -2,11 +2,7 @@ import { Background, MiniMap, type ReactFlowProps } from "@xyflow/react";
 import { useCallback, useState } from "react";
 
 import { FlowCanvas, FlowControls } from "@/components/shared/ReactFlow";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { ComponentLibraryProvider } from "@/providers/ComponentLibraryProvider";
 import { ContextPanelProvider } from "@/providers/ContextPanelProvider";
 
@@ -39,9 +35,9 @@ const PipelineRunPage = ({ pipelineRunId }: { pipelineRunId: string }) => {
     <RootExecutionStatusProvider pipelineRunId={pipelineRunId}>
       <ContextPanelProvider defaultContent={<RunDetails />}>
         <ComponentLibraryProvider>
-          <ResizablePanelGroup direction="horizontal">
-            <ResizablePanel>
-              <div className="reactflow-wrapper h-full w-full">
+          <InlineStack className="w-full h-full" align="start">
+            <BlockStack className="flex-1 h-full">
+              <div className="reactflow-wrapper relative">
                 <FlowCanvas {...flowConfig} readOnly>
                   <MiniMap position="bottom-left" pannable />
                   <FlowControls
@@ -53,10 +49,9 @@ const PipelineRunPage = ({ pipelineRunId }: { pipelineRunId: string }) => {
                   <Background gap={GRID_SIZE} className="bg-slate-50!" />
                 </FlowCanvas>
               </div>
-            </ResizablePanel>
-            <ResizableHandle />
+            </BlockStack>
             <CollapsibleContextPanel />
-          </ResizablePanelGroup>
+          </InlineStack>
         </ComponentLibraryProvider>
       </ContextPanelProvider>
     </RootExecutionStatusProvider>

src/components/PipelineRun/PipelineRunPage.tsx

@@ -1,64 +1,60 @@
-import { PanelRightClose, PanelRightOpen } from "lucide-react";
-import { useRef, useState } from "react";
-import type { ImperativePanelHandle } from "react-resizable-panels";
+import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
-import { ResizablePanel } from "@/components/ui/resizable";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Icon } from "@/components/ui/icon";
+import { VerticalResizeHandle } from "@/components/ui/resize-handle";
 import { cn } from "@/lib/utils";
 
 import { ContextPanel } from "./ContextPanel";
 
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 600;
+const DEFAULT_WIDTH = 400;
+
+interface CollapsibleContextPanelProps {
+  defaultOpen?: boolean;
+}
+
 export function CollapsibleContextPanel({
-  defaultSize = 30,
-  minSize = 15,
-  maxSize = 50,
-  collapsedSize = 3,
-}: {
-  defaultSize?: number;
-  minSize?: number;
-  maxSize?: number;
-  collapsedSize?: number;
-}) {
-  const resizablePanelRef = useRef<ImperativePanelHandle>(null);
-  const [collapsed, setCollapsed] = useState(false);
+  defaultOpen = true,
+}: CollapsibleContextPanelProps = {}) {
+  const [open, setOpen] = useState(defaultOpen);
 
   return (
-    <ResizablePanel
-      ref={resizablePanelRef}
-      collapsible
-      defaultSize={defaultSize}
-      minSize={minSize}
-      maxSize={maxSize}
-      collapsedSize={collapsedSize}
-      onCollapse={() => setCollapsed(true)}
-      onExpand={() => setCollapsed(false)}
-    >
-      {collapsed && (
-        <div className="relative">
-          <Button
-            className="absolute top-2 right-2"
-            variant="ghost"
-            onClick={() => {
-              resizablePanelRef.current?.expand();
-              resizablePanelRef.current?.resize(30);
-            }}
-          >
-            <PanelRightOpen className="h-6 w-6" />
-          </Button>
-        </div>
-      )}
-      <div className={cn("h-full relative", collapsed && "hidden")}>
+    <Collapsible open={open} onOpenChange={setOpen} className="h-full">
+      <CollapsibleTrigger asChild>
         <Button
-          className="absolute top-2 right-2"
           variant="ghost"
-          onClick={() => {
-            resizablePanelRef.current?.collapse();
-          }}
+          size="icon"
+          className={
+            "absolute top-[95px] z-0 transition-all duration-300 bg-white rounded-r-md shadow-md p-0.5 pr-1 -translate-x-8"
+          }
+          aria-label={open ? "Collapse context panel" : "Expand context panel"}
         >
-          <PanelRightClose className="h-6 w-6" />
+          <Icon name={open ? "PanelRightClose" : "PanelRightOpen"} />
         </Button>
-        <ContextPanel />
+      </CollapsibleTrigger>
+      <div
+        className={cn("relative h-full flex", !open && "!w-0")}
+        style={{ width: `${DEFAULT_WIDTH}px` }}
+      >
+        {open && (
+          <VerticalResizeHandle
+            side="left"
+            minWidth={MIN_WIDTH}
+            maxWidth={MAX_WIDTH}
+          />
+        )}
+
+        <CollapsibleContent className="flex-1 h-full overflow-hidden">
+          <ContextPanel />
+        </CollapsibleContent>
       </div>
-    </ResizablePanel>
+    </Collapsible>
   );
 }

src/components/shared/ContextPanel/CollapsibleContextPanel.tsx

@@ -26,7 +26,7 @@ export const SubgraphBreadcrumbs = () => {
       align="space-between"
       blockAlign="center"
       gap="0"
-      className="px-4 py-2 bg-gray-50 border-b w-full"
+      className="px-4 py-2 bg-gray-50 border-b w-full z-1"
     >
       <Breadcrumb>
         <BreadcrumbList>

src/components/shared/ReactFlow/FlowCanvas/SubgraphBreadcrumbs/SubgraphBreadcrumbs.tsx

@@ -0,0 +1,108 @@
+import { useCallback, useRef } from "react";
+
+import { Icon } from "@/components/ui/icon";
+import { cn } from "@/lib/utils";
+
+interface ResizeHandleProps {
+  minWidth?: number;
+  maxWidth?: number;
+  side?: "left" | "right";
+}
+
+export const VerticalResizeHandle = ({
+  minWidth = 200,
+  maxWidth = 600,
+  side = "left",
+}: ResizeHandleProps) => {
+  const parentElementRef = useRef<HTMLElement | null>(null);
+  const resizingRef = useRef<{ startX: number; startWidth: number } | null>(
+    null,
+  );
+
+  const captureParentElement = useCallback((element: HTMLElement | null) => {
+    parentElementRef.current = element?.parentElement ?? null;
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!resizingRef.current || !parentElementRef.current) return;
+
+      const deltaX = e.clientX - resizingRef.current.startX;
+
+      let newWidth: number;
+      if (side === "left") {
+        newWidth = resizingRef.current.startWidth - deltaX;
+      } else {
+        newWidth = resizingRef.current.startWidth + deltaX;
+      }
+
+      const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+
+      parentElementRef.current.style.width = `${constrainedWidth}px`;
+    },
+    [minWidth, maxWidth, side],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    resizingRef.current = null;
+
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+  }, [handleMouseMove]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!parentElementRef.current) return;
+
+      resizingRef.current = {
+        startX: e.clientX,
+        startWidth: parentElementRef.current.offsetWidth,
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [handleMouseMove, handleMouseUp],
+  );
+
+  return (
+    <div
+      className={cn(
+        "absolute top-0 h-full cursor-col-resize z-10 group",
+        side === "left" ? "left-0" : "right-0",
+        "w-2 -mx-0.5",
+      )}
+      ref={captureParentElement}
+      onMouseDown={handleMouseDown}
+    >
+      {/* Thin visible line with shadow */}
+      <div
+        className={cn(
+          "absolute top-0 h-full w-px bg-border transition-all pointer-events-none",
+          "group-hover:bg-primary/30",
+
+          side === "left"
+            ? "left-1/2 -translate-x-1/2 shadow-[2px_0_8px_rgba(0,0,0,0.08)]"
+            : "right-1/2 translate-x-1/2 shadow-[-2px_0_8px_rgba(0,0,0,0.08)]",
+        )}
+      />
+
+      <Icon
+        name="GripVertical"
+        className={cn(
+          "absolute top-1/2 -translate-y-1/2 pointer-events-none",
+          "bg-background/90 backdrop-blur-sm rounded-xs p-1",
+          "text-muted-foreground opacity-0 group-hover:opacity-100",
+          "transition-opacity duration-200",
+
+          side === "left"
+            ? "left-1/2 -translate-x-1/2"
+            : "right-1/2 translate-x-1/2",
+        )}
+      />
+    </div>
+  );
+};