From 72feb39d56a7e169d264e29dc65c8cf58e84e04f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 22 Aug 2026 06:20:53 +0000
Subject: [PATCH] fix(web): enlarge step handles and mark them nodrag for
 connections

Co-authored-by: Nasyarobby Putra <nasyarobby@gmail.com>
---
 packages/web/src/components/workflow/GraphTab.jsx         | 2 +-
 packages/web/src/components/workflow/graph/GraphNodes.jsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/workflow/GraphTab.jsx b/packages/web/src/components/workflow/GraphTab.jsx
index 2d4d80e..476b27e 100644
--- a/packages/web/src/components/workflow/GraphTab.jsx
+++ b/packages/web/src/components/workflow/GraphTab.jsx
@@ -284,7 +284,7 @@ function GraphTabInner({
             onEdgesDelete={onEdgesDelete}
             nodesConnectable={!disabled}
             nodesDraggable={!disabled}
-            connectionRadius={40}
+            connectionRadius={80}
             defaultEdgeOptions={{ type: "smoothstep" }}
             proOptions={{ hideAttribution: false }}
           >
diff --git a/packages/web/src/components/workflow/graph/GraphNodes.jsx b/packages/web/src/components/workflow/graph/GraphNodes.jsx
index 7ff6f91..e0aa990 100644
--- a/packages/web/src/components/workflow/graph/GraphNodes.jsx
+++ b/packages/web/src/components/workflow/graph/GraphNodes.jsx
@@ -12,7 +12,7 @@ export function TriggerGraphNode({ data, selected }) {
       <p className="font-mono text-[11px] opacity-70 truncate" title={data.label}>
         {data.label}
       </p>
-      <Handle type="source" position={Position.Right} isConnectable={false} className="!h-3 !w-3" />
+      <Handle type="source" position={Position.Right} isConnectable={false} className="!h-3 !w-3 opacity-40" />
     </div>
   );
 }
@@ -33,7 +33,7 @@ export function StepGraphNode({ data, selected }) {
         type="target"
         position={Position.Left}
         id="in"
-        className="!h-3 !w-3 !bg-primary"
+        className="nodrag nopan !h-3.5 !w-3.5 !bg-primary"
         isConnectable
       />
       <div className="flex items-center gap-1">
@@ -62,7 +62,7 @@ export function StepGraphNode({ data, selected }) {
         type="source"
         position={Position.Right}
         id="out"
-        className="!h-3 !w-3 !bg-primary"
+        className="nodrag nopan !h-3.5 !w-3.5 !bg-primary"
         isConnectable
       />
     </div>