chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: stop connector fork line from overlapping child cards

Browse Source 
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>
This commit is contained in:
chihlasm
2026-02-18 03:21:43 -05:00
parent 8d8f557951
commit 66a0fb01a2
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/tree-editor/TreeCanvas.tsx
View File

@@ -619,29 +619,31 @@ export function TreeCanvas() {
</div> </div>
) : ( ) : (
// Multiple children: horizontal branching // Multiple children: horizontal branching
<div className="flex flex-col items-center w-full"> // The fork line and child lanes share the same flex container so the
{/* Horizontal fork line */} // 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 <div
className="h-px bg-border w-full" className="absolute top-0 h-px bg-border pointer-events-none"
style={{ maxWidth: `${orderedChildren.length * 300}px` }} style={{
left: `calc(${100 / (orderedChildren.length * 2)}%)`,
right: `calc(${100 / (orderedChildren.length * 2)}%)`,
}}
/> />
{/* Child lanes */} {orderedChildren.map(({ child, optionLabel: ol, childIndex }) => (
<div <div
className="flex items-start justify-center gap-6 pt-0 w-full" key={child.id}
style={{ maxWidth: `${orderedChildren.length * 360}px` }} className="flex flex-col items-center min-w-[260px]"
> >
{orderedChildren.map(({ child, optionLabel: ol, childIndex }) => ( {/* Vertical stub into child lane */}
<div <div className="h-4 w-px bg-border" />
key={child.id} {renderNode(child, node.id, childIndex, ol)}
className="flex flex-col items-center min-w-[260px]" </div>
> ))}
{/* Vertical stub into child lane */}
<div className="h-4 w-px bg-border" />
{renderNode(child, node.id, childIndex, ol)}
</div>
))}
</div>
</div> </div>
)} )}
</div> </div>