From 66a0fb01a2f9eeb49993e267acee022d5f535f84 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 03:21:43 -0500
Subject: [PATCH] fix: stop connector fork line from overlapping child cards

Replace the two-element approach (separate fork line + child lanes div with
mismatched maxWidth values) with a single relative-positioned container.
The fork line is absolutely positioned and its left/right are calculated from
the number of children so it spans exactly from the center of the first lane
to the center of the last lane.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/tree-editor/TreeCanvas.tsx | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx
index ecb00322..a89cfd25 100644
--- a/frontend/src/components/tree-editor/TreeCanvas.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvas.tsx
@@ -619,29 +619,31 @@ export function TreeCanvas() {
                 </div>
               ) : (
                 // Multiple children: horizontal branching
-                <div className="flex flex-col items-center w-full">
-                  {/* Horizontal fork line */}
+                // The fork line and child lanes share the same flex container so the
+                // line is sized by the actual rendered children, not a hardcoded estimate.
+                <div className="flex items-start justify-center gap-6 w-full relative"
+                  style={{ maxWidth: `${orderedChildren.length * 360}px` }}
+                >
+                  {/* Horizontal fork line — absolutely positioned, aligned to child centers.
+                      Spans from center of first lane to center of last lane. */}
                   <div
-                    className="h-px bg-border w-full"
-                    style={{ maxWidth: `${orderedChildren.length * 300}px` }}
+                    className="absolute top-0 h-px bg-border pointer-events-none"
+                    style={{
+                      left: `calc(${100 / (orderedChildren.length * 2)}%)`,
+                      right: `calc(${100 / (orderedChildren.length * 2)}%)`,
+                    }}
                   />
 
-                  {/* Child lanes */}
-                  <div
-                    className="flex items-start justify-center gap-6 pt-0 w-full"
-                    style={{ maxWidth: `${orderedChildren.length * 360}px` }}
-                  >
-                    {orderedChildren.map(({ child, optionLabel: ol, childIndex }) => (
-                      <div
-                        key={child.id}
-                        className="flex flex-col items-center min-w-[260px]"
-                      >
-                        {/* Vertical stub into child lane */}
-                        <div className="h-4 w-px bg-border" />
-                        {renderNode(child, node.id, childIndex, ol)}
-                      </div>
-                    ))}
-                  </div>
+                  {orderedChildren.map(({ child, optionLabel: ol, childIndex }) => (
+                    <div
+                      key={child.id}
+                      className="flex flex-col items-center min-w-[260px]"
+                    >
+                      {/* Vertical stub into child lane */}
+                      <div className="h-4 w-px bg-border" />
+                      {renderNode(child, node.id, childIndex, ol)}
+                    </div>
+                  ))}
                 </div>
               )}
             </div>