frontend/src/components/tree-editor/TreeCanvas.tsx

@@ -619,18 +619,21 @@ export function TreeCanvas() {
                 </div>
               ) : (
                 // Multiple children: horizontal branching
-                <div className="flex flex-col items-center w-full">
-                  {/* Horizontal fork line */}
-                  <div
-                    className="h-px bg-border w-full"
-                    style={{ maxWidth: `${orderedChildren.length * 300}px` }}
-                  />
-
-                  {/* Child lanes */}
-                  <div
-                    className="flex items-start justify-center gap-6 pt-0 w-full"
+                // 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="absolute top-0 h-px bg-border pointer-events-none"
+                    style={{
+                      left: `calc(${100 / (orderedChildren.length * 2)}%)`,
+                      right: `calc(${100 / (orderedChildren.length * 2)}%)`,
+                    }}
+                  />
+
                   {orderedChildren.map(({ child, optionLabel: ol, childIndex }) => (
                     <div
                       key={child.id}
@@ -642,7 +645,6 @@ export function TreeCanvas() {
                     </div>
                   ))}
                 </div>
-                </div>
               )}
             </div>
           )}