fix: ensure edge labels stay above selected groups

Edge labels were appearing behind edges when a group was selected
because React Flow elevates selected nodes to z-index ~1000, bringing
their child edges above the edge labels.

Solution:
- Increased edge label z-index from 1000 to 1100
- Ensures labels always render on top of edges, even in selected groups

The issue occurred because:
1. Edge labels use EdgeLabelRenderer (separate overlay layer)
2. When groups are selected, React Flow increases their z-index
3. Group edges (SVG elements) inherit the elevated z-index
4. Edge labels at z-index 1000 were below the elevated edges

By setting edge labels to z-index 1100, they now consistently
render above all edges regardless of selection state.

Benefits:
-  Edge labels always readable, even with selected groups
-  Consistent label visibility across all interaction states
-  Better UX for understanding relationships in groups

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-20 15:24:41 +02:00
parent 178292435f
commit 5bfd3029e1

View file

@ -216,7 +216,7 @@ const CustomEdge = ({
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`, transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
pointerEvents: 'all', pointerEvents: 'all',
opacity: edgeOpacity, opacity: edgeOpacity,
zIndex: 1000, zIndex: 1100, // Higher than selected groups (which get ~1000) to stay on top
}} }}
className="bg-white px-2 py-1 rounded border border-gray-300 text-xs font-medium shadow-sm" className="bg-white px-2 py-1 rounded border border-gray-300 text-xs font-medium shadow-sm"
> >