From 69b097c0f0829839f2e257e1c4d63da32ffd8b23 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sun, 11 Jan 2026 21:19:41 +1300
Subject: [PATCH] fix: align handle connection points with visual handle
 positions

Use calc() to offset handle positions by 5px (half of 10px handle size)
to center handles at their percentage positions. This ensures edge
connection points align with the visible handle dots and labels.

Avoid using CSS transform which breaks React Flow's handle detection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/FloatingActionBar.tsx       | 8 +++++++-
 src/components/nodes/GenerateImageNode.tsx | 8 ++++----
 src/components/nodes/GenerateVideoNode.tsx | 8 ++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/FloatingActionBar.tsx b/src/components/FloatingActionBar.tsx
index 89851d05..bdf7a6c4 100644
--- a/src/components/FloatingActionBar.tsx
+++ b/src/components/FloatingActionBar.tsx
@@ -181,6 +181,12 @@ export function FloatingActionBar() {
   } = useWorkflowStore();
   const [runMenuOpen, setRunMenuOpen] = useState(false);
   const runMenuRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Defer client-only rendering to avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const { valid, errors } = validateWorkflow();
 
@@ -246,7 +252,7 @@ export function FloatingActionBar() {
         <div className="w-px h-5 bg-neutral-600 mx-1.5" />
 
         {/* Replicate icon - only show if API key is configured */}
-        {providerSettings.providers.replicate?.apiKey && (
+        {mounted && providerSettings.providers.replicate?.apiKey && (
           <ProviderIconButton
             provider="replicate"
             onClick={() => setModelSearchOpen(true, "replicate")}
diff --git a/src/components/nodes/GenerateImageNode.tsx b/src/components/nodes/GenerateImageNode.tsx
index 847a6189..d952d8b5 100644
--- a/src/components/nodes/GenerateImageNode.tsx
+++ b/src/components/nodes/GenerateImageNode.tsx
@@ -360,7 +360,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
                   type="target"
                   position={Position.Left}
                   id={input.name}
-                  style={{ top: `${topPercent}%` }}
+                  style={{ top: `calc(${topPercent}% - 5px)` }}
                   data-handletype={input.type}
                   isConnectable={true}
                   title={input.description || input.label}
@@ -387,7 +387,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
             type="target"
             position={Position.Left}
             id="image"
-            style={{ top: "35%" }}
+            style={{ top: "calc(35% - 5px)" }}
             data-handletype="image"
             isConnectable={true}
           />
@@ -406,7 +406,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
             type="target"
             position={Position.Left}
             id="text"
-            style={{ top: "65%" }}
+            style={{ top: "calc(65% - 5px)" }}
             data-handletype="text"
           />
           {/* Default text label */}
@@ -427,7 +427,7 @@ export function GenerateImageNode({ id, data, selected }: NodeProps<NanoBananaNo
         type="source"
         position={Position.Right}
         id="image"
-        style={{ top: "50%" }}
+        style={{ top: "calc(50% - 5px)" }}
         data-handletype="image"
       />
       {/* Output label */}
diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index 4033dc6b..f9c7774c 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -195,7 +195,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
                   type="target"
                   position={Position.Left}
                   id={input.name}
-                  style={{ top: `${topPercent}%` }}
+                  style={{ top: `calc(${topPercent}% - 5px)` }}
                   data-handletype={input.type}
                   isConnectable={true}
                   title={input.description || input.label}
@@ -222,7 +222,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
             type="target"
             position={Position.Left}
             id="image"
-            style={{ top: "35%" }}
+            style={{ top: "calc(35% - 5px)" }}
             data-handletype="image"
             isConnectable={true}
           />
@@ -241,7 +241,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
             type="target"
             position={Position.Left}
             id="text"
-            style={{ top: "65%" }}
+            style={{ top: "calc(65% - 5px)" }}
             data-handletype="text"
           />
           {/* Default text label */}
@@ -262,7 +262,7 @@ export function GenerateVideoNode({ id, data, selected }: NodeProps<GenerateVide
         type="source"
         position={Position.Right}
         id="image"
-        style={{ top: "50%" }}
+        style={{ top: "calc(50% - 5px)" }}
         data-handletype="image"
       />
       {/* Output label */}