From eabc607883af4dcf1201410e84884d3ddd1083cf Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sun, 22 Mar 2026 22:17:21 +1300
Subject: [PATCH] fix: move ImageInputNode handles after visual content to
 prevent z-order clipping

The left handle was rendered before the image wrapper div in DOM order.
Since the image wrapper has position: relative (needed for its remove
button), it painted over the handle. Moving both handles to render
after visual content ensures they paint last (on top).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/ImageInputNode.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/nodes/ImageInputNode.tsx b/src/components/nodes/ImageInputNode.tsx
index 403708b8..3ae43d91 100644
--- a/src/components/nodes/ImageInputNode.tsx
+++ b/src/components/nodes/ImageInputNode.tsx
@@ -91,15 +91,6 @@ export function ImageInputNode({ id, data, selected }: NodeProps<ImageInputNodeT
       aspectFitMedia={nodeData.image}
       fullBleed
     >
-      {/* Reference input handle for visual links from Split Grid node */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="reference"
-        data-handletype="reference"
-        className="!bg-gray-500"
-      />
-
       <input
         ref={fileInputRef}
         type="file"
@@ -148,6 +139,14 @@ export function ImageInputNode({ id, data, selected }: NodeProps<ImageInputNodeT
         </div>
       )}
 
+      {/* Handles rendered after visual content so they paint on top */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="reference"
+        data-handletype="reference"
+        className="!bg-gray-500"
+      />
       <Handle
         type="source"
         position={Position.Right}