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>