fix: node resize

frontend/src/components/base/BaseNode.tsx

@@ -1,10 +1,14 @@
 import type { ComponentProps, ReactNode } from "react";
-import { NodeResizeControl } from "@xyflow/react";
+import { NodeResizer } from "@xyflow/react";
 
 import { cn } from "@/lib/utils";
 
+/** Default min size for resizable nodes (used by NodeResizer). */
+export const RESIZE_MIN_WIDTH = 120;
+export const RESIZE_MIN_HEIGHT = 80;
+
 export type BaseNodeProps = ComponentProps<"div"> & {
-  /** When true, shows a bottom-right resize handle. Requires nodeId when used inside React Flow. */
+  /** When true, shows resize handles on corners/edges (via NodeResizer). Requires nodeId when used inside React Flow. */
   resizable?: boolean;
   /** Node id for the resize control (required when resizable is true). */
   nodeId?: string;
@@ -14,6 +18,8 @@ export type BaseNodeProps = ComponentProps<"div"> & {
   dimensions?: { width: number; height: number };
   /** When true, node is selected (from React Flow NodeProps). Used for visible selected state. */
   selected?: boolean;
+  /** Optional min/max for NodeResizer. Omit to use RESIZE_MIN_WIDTH / RESIZE_MIN_HEIGHT. */
+  resizeConstraints?: { minWidth?: number; minHeight?: number; maxWidth?: number; maxHeight?: number };
 };
 
 export function BaseNode({
@@ -25,6 +31,7 @@ export function BaseNode({
   handles,
   children,
   selected,
+  resizeConstraints,
   ...props
 }: BaseNodeProps) {
   const hasSize =
@@ -46,6 +53,9 @@ export function BaseNode({
       ? { ...style, display: "flex", flexDirection: "column" as const }
       : undefined;
 
+  const minW = resizeConstraints?.minWidth ?? RESIZE_MIN_WIDTH;
+  const minH = resizeConstraints?.minHeight ?? RESIZE_MIN_HEIGHT;
+
   return (
     <div
       className={cn(
@@ -66,19 +76,16 @@ export function BaseNode({
         {children}
       </div>
       {resizable && nodeId && (
-        <NodeResizeControl
+        <NodeResizer
           nodeId={nodeId}
-          position="bottom-right"
-          minWidth={120}
-          minHeight={80}
-          className={cn(
-            "!border-0 !bg-transparent !rounded-none !p-0",
-            "absolute bottom-0 right-0 w-8 h-8 cursor-se-resize select-none",
-            "nodrag nopan touch-none",
-          )}
-          style={{ margin: 0, touchAction: "none", userSelect: "none" }}
-        >
-        </NodeResizeControl>
+          isVisible={selected}
+          minWidth={minW}
+          minHeight={minH}
+          maxWidth={resizeConstraints?.maxWidth}
+          maxHeight={resizeConstraints?.maxHeight}
+          color="transparent"
+          handleClassName="base-node-resize-handle nodrag nopan"
+        />
       )}
       {handles}
     </div>