From bf01d6be2b16ae768d1294bed47d49ee3b91ae9e Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Tue, 3 Mar 2026 20:58:09 +1300
Subject: [PATCH] fix: move overflow clipping from content div to media wrapper
 in OutputNode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Handles were inside the content div that had overflow-clip, causing them
to be clipped. Move clipping to a wrapper around just the media content
so handles remain unclipped — same pattern as GenerateImage/VideoNode.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/nodes/OutputNode.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/nodes/OutputNode.tsx b/src/components/nodes/OutputNode.tsx
index b8c1d924..221622cb 100644
--- a/src/components/nodes/OutputNode.tsx
+++ b/src/components/nodes/OutputNode.tsx
@@ -112,7 +112,7 @@ export function OutputNode({ id, data, selected }: NodeProps<OutputNodeType>) {
         id={id}
         selected={selected}
         isExecuting={isRunning}
-        contentClassName="flex-1 min-h-0 overflow-clip rounded-lg relative"
+        contentClassName="flex-1 min-h-0 relative"
         className="min-w-[200px]"
       >
         <Handle
@@ -130,6 +130,7 @@ export function OutputNode({ id, data, selected }: NodeProps<OutputNodeType>) {
           style={{ top: "60%", background: "rgb(167, 139, 250)", zIndex: 10 }}
         />
 
+        <div className="relative w-full h-full overflow-hidden rounded-lg">
         {contentSrc ? (
           <>
             {isAudio ? (
@@ -188,6 +189,7 @@ export function OutputNode({ id, data, selected }: NodeProps<OutputNodeType>) {
             <span className="text-xs text-neutral-500 mt-2">Connect input</span>
           </div>
         )}
+        </div>
       </BaseNode>
 
       {/* Lightbox Modal (skip for audio) */}