From 875031d63d4679ba8bfb9bc25cc5206c3ffd960b Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sun, 22 Mar 2026 21:48:10 +1300
Subject: [PATCH] fix: move overflow-clip from contentClassName to inner visual
 wrappers to prevent handle clipping

Nodes that passed overflow-clip via contentClassName to BaseNode were
clipping their React Flow handles since handles are children of the
content div. Moved the clip to inner content wrappers that don't
contain handles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/AnnotationNode.tsx | 4 ++--
 src/components/nodes/GLBViewerNode.tsx  | 2 +-
 src/components/nodes/ImageInputNode.tsx | 4 ++--
 src/components/nodes/VideoTrimNode.tsx  | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/nodes/AnnotationNode.tsx b/src/components/nodes/AnnotationNode.tsx
index 021271e9..34b9d4dd 100644
--- a/src/components/nodes/AnnotationNode.tsx
+++ b/src/components/nodes/AnnotationNode.tsx
@@ -96,7 +96,7 @@ export function AnnotationNode({ id, data, selected }: NodeProps<AnnotationNodeT
     <BaseNode
       id={id}
       selected={selected}
-      contentClassName="flex-1 min-h-0 overflow-clip"
+      contentClassName="flex-1 min-h-0"
       aspectFitMedia={nodeData.outputImage}
     >
       <input
@@ -122,7 +122,7 @@ export function AnnotationNode({ id, data, selected }: NodeProps<AnnotationNodeT
 
       {displayImage ? (
         <div
-          className="relative group cursor-pointer w-full h-full"
+          className="relative group cursor-pointer w-full h-full overflow-clip rounded-lg"
           onClick={handleEdit}
         >
           <img
diff --git a/src/components/nodes/GLBViewerNode.tsx b/src/components/nodes/GLBViewerNode.tsx
index ae6603b1..51d6f189 100644
--- a/src/components/nodes/GLBViewerNode.tsx
+++ b/src/components/nodes/GLBViewerNode.tsx
@@ -361,7 +361,7 @@ export function GLBViewerNode({ id, data, selected }: NodeProps<GLBViewerNodeTyp
     <BaseNode
       id={id}
       selected={selected}
-      contentClassName={nodeData.glbUrl ? "flex-1 min-h-0 overflow-hidden flex flex-col" : undefined}
+      contentClassName={nodeData.glbUrl ? "flex-1 min-h-0 flex flex-col" : undefined}
       aspectFitMedia={nodeData.capturedImage}
     >
       <input
diff --git a/src/components/nodes/ImageInputNode.tsx b/src/components/nodes/ImageInputNode.tsx
index 00a27203..403708b8 100644
--- a/src/components/nodes/ImageInputNode.tsx
+++ b/src/components/nodes/ImageInputNode.tsx
@@ -87,7 +87,7 @@ export function ImageInputNode({ id, data, selected }: NodeProps<ImageInputNodeT
     <BaseNode
       id={id}
       selected={selected}
-      contentClassName="flex-1 min-h-0 overflow-clip"
+      contentClassName="flex-1 min-h-0"
       aspectFitMedia={nodeData.image}
       fullBleed
     >
@@ -109,7 +109,7 @@ export function ImageInputNode({ id, data, selected }: NodeProps<ImageInputNodeT
       />
 
       {nodeData.image ? (
-        <div className="relative group w-full h-full">
+        <div className="relative group w-full h-full overflow-clip rounded-lg">
           <img
             src={adaptiveImage ?? undefined}
             alt={nodeData.filename || "Uploaded image"}
diff --git a/src/components/nodes/VideoTrimNode.tsx b/src/components/nodes/VideoTrimNode.tsx
index 168c9940..85b108d0 100644
--- a/src/components/nodes/VideoTrimNode.tsx
+++ b/src/components/nodes/VideoTrimNode.tsx
@@ -204,7 +204,7 @@ export function VideoTrimNode({ id, data, selected }: NodeProps<VideoTrimNodeTyp
       <BaseNode
         id={id}
         selected={selected}
-        contentClassName="flex-1 min-h-0 overflow-clip"
+        contentClassName="flex-1 min-h-0"
         minWidth={360}
         minHeight={360}
       >