Skip to content

fix: account for edge case with single child #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kpatell merged 1 commit into from
Nov 30, 2025
Merged

fix: account for edge case with single child #34

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions src/components/FamilyTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,8 +181,19 @@ const IncomingLine: React.FC<{ childId: string, members: FamilyMember[], index:

const BusSegments: React.FC<{ index: number, total: number, childId: string, members: FamilyMember[] }> = ({ index, total, childId, members }) => {
const offset = getMemberOffset(childId, members, index, total);
// Parse the rem value to number for calculation if needed, or use calc()
// offset is like '6.75rem' or '-6.75rem' or '0px'

// Case: Single Child with Offset (Bridge to Parent Center)
if (total === 1 && offset !== '0px') {
return (
<div
className="absolute top-[-1rem] h-px bg-secondary-300 transition-all duration-300"
style={{
left: offset.startsWith('-') ? `calc(50% + ${offset})` : '50%',
width: offset.startsWith('-') ? offset.substring(1) : offset
}}
></div>
);
}

return (
<>
Expand All @@ -192,14 +203,6 @@ const BusSegments: React.FC<{ index: number, total: number, childId: string, mem
className="absolute top-[-1rem] h-px bg-secondary-300 transition-all duration-300"
style={{
left: '-1rem', // Start from far left of slot (connecting to previous sibling)
// Width needs to reach the Incoming Line
// Center is 50%. Incoming Line is at 50% + offset.
// Left edge is at 0%? No, left: -1rem implies relative to this container.
// This container width is determined by content.
// Actually, the standard implementation assumes the vertical line is at 50%.
// width: calc(50% + 1rem).
// Now vertical line is at 50% + offset.
// So width should be calc(50% + 1rem + offset).
width: `calc(50% + 1rem + ${offset})`
}}
></div>
Expand All @@ -210,11 +213,7 @@ const BusSegments: React.FC<{ index: number, total: number, childId: string, mem
<div
className="absolute top-[-1rem] h-px bg-secondary-300 transition-all duration-300"
style={{
// Starts at Incoming Line and goes to right edge
left: `calc(50% + ${offset})`,
// Standard width was calc(50% + 1rem).
// Total width available is roughly 100% + 2rem?
// If we shift start by offset, we subtract offset from width.
width: `calc(50% + 1rem - ${offset})`
}}
></div>
Expand Down