From 5bfd3029e1b269ce197d8ceffc1bb0114a2b8a35 Mon Sep 17 00:00:00 2001 From: Jan-Henrik Bruhn Date: Mon, 20 Oct 2025 15:24:41 +0200 Subject: [PATCH] fix: ensure edge labels stay above selected groups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/Edges/CustomEdge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Edges/CustomEdge.tsx b/src/components/Edges/CustomEdge.tsx index e573010..191c694 100644 --- a/src/components/Edges/CustomEdge.tsx +++ b/src/components/Edges/CustomEdge.tsx @@ -216,7 +216,7 @@ const CustomEdge = ({ transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`, pointerEvents: 'all', 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" >