Fix label and connection line positioning

- Move label closer to symbol (y = symbolSize/2 + 15)
- Increase childDropHeight from 30 to 50 to place connection lines below labels

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/PedigreeCanvas/hooks/useD3Pedigree.ts

@@ -446,15 +446,13 @@ function renderPersons(
         .attr('fill', 'none');
     }
 
-    // Label (positioned below connection lines)
+    // Label (positioned just below the symbol, above connection lines)
-    // Vertical lines to children end at childY - halfSymbol = parentY + verticalSpacing - 20 = parentY + 80
-    // So label must be > 80 to avoid overlap. Using 85.
     if (options.showLabels && person.metadata.label) {
       personGroup
         .append('text')
         .attr('class', 'person-label')
         .attr('x', 0)
-        .attr('y', options.symbolSize / 2 + 65)
+        .attr('y', options.symbolSize / 2 + 15)
         .attr('text-anchor', 'middle')
         .attr('font-size', '12px')
         .attr('font-family', 'sans-serif')
@@ -467,7 +465,7 @@ function renderPersons(
         .append('text')
         .attr('class', 'person-id')
         .attr('x', 0)
-        .attr('y', options.symbolSize / 2 + 65)
+        .attr('y', options.symbolSize / 2 + 15)
         .attr('text-anchor', 'middle')
         .attr('font-size', '11px')
         .attr('font-family', 'sans-serif')

src/core/renderer/ConnectionRenderer.ts

@@ -22,7 +22,7 @@ export interface ConnectionConfig {
 export const DEFAULT_CONNECTION_CONFIG: ConnectionConfig = {
   lineWidth: 2,
   doubleLineGap: 4,
-  childDropHeight: 30,
+  childDropHeight: 50,  // Increased to leave room for labels above the connection lines
   symbolSize: 40,
 };