From a1873a801ce3e7d905fa2a6ad96dd803ef64ec17 Mon Sep 17 00:00:00 2001
From: mohiit1502 <mohiit1502@gmail.com>
Date: Fri, 21 Aug 2026 20:14:46 +0530
Subject: [PATCH] fix(canvas): suppress dashed border when dragging over
 overlay panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The onDragOver handler on the ReactFlow root fires even when the pointer
is over child overlay panels (NodePalette, Inspector) because they are
DOM descendants. The previous document-level listener approach was
insufficient.

Now checks target.closest('.react-flow__panel') directly inside
handleDragOver — if the pointer is over a panel, clears isDragOver /
dragFlowPos and returns early instead of showing drop feedback. Also
removes the now-redundant document-level dragover listener.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../workflows/components/WorkflowCanvas.tsx   | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/pages/workflows/components/WorkflowCanvas.tsx b/src/pages/workflows/components/WorkflowCanvas.tsx
index 571220e..42dd37c 100644
--- a/src/pages/workflows/components/WorkflowCanvas.tsx
+++ b/src/pages/workflows/components/WorkflowCanvas.tsx
@@ -190,6 +190,14 @@ export function WorkflowCanvas({
   // Drag-to-add from palette
   const handleDragOver = useCallback((event: React.DragEvent) => {
     if (!event.dataTransfer.types.includes(PALETTE_DRAG_FORMAT)) return
+    // If the pointer is over an overlay panel (NodePalette, Inspector, etc.),
+    // suppress the drop cues — drops on panels are blocked and shouldn't show feedback.
+    const target = event.target as HTMLElement | null
+    if (target?.closest('.react-flow__panel')) {
+      setIsDragOver(false)
+      setDragFlowPos(null)
+      return
+    }
     event.preventDefault()
     event.dataTransfer.dropEffect = 'move'
     setIsDragOver(true)
@@ -208,21 +216,7 @@ export function WorkflowCanvas({
     }
   }, [])
 
-  // Document-level dragover: clear cues whenever cursor moves over a panel overlay.
-  // Panels use stopPropagation so canvas onDragOver never fires over them —
-  // without this, isDragOver stays true when hovering panels mid-drag.
-  useEffect(() => {
-    const handleDocDragOver = (e: DragEvent) => {
-      if (!(e.dataTransfer?.types ?? []).includes(PALETTE_DRAG_FORMAT)) return
-      const target = e.target as HTMLElement | null
-      if (target?.closest('.react-flow__panel')) {
-        setIsDragOver(false)
-        setDragFlowPos(null)
-      }
-    }
-    document.addEventListener('dragover', handleDocDragOver)
-    return () => document.removeEventListener('dragover', handleDocDragOver)
-  }, [])
+
 
   const handleDrop = useCallback((event: React.DragEvent) => {
     setIsDragOver(false)