From f89a901944d4bcd33a38baa02ce93db58e07cbb2 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Thu, 24 Sep 2026 16:18:12 +0200
Subject: [PATCH] re-index the display levels of edges and nodes

---
 CHANGELOG.md                                   |  3 +++
 src/cmem/react-flow/nodes/_stickynote.scss     |  3 +++
 src/extensions/react-flow/_react-flow_v12.scss | 15 +++++++++++++++
 3 files changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e227a6654..798b8c726 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     - uses now the `Markdown.cutOff` property
         - this enables Markdown rendering even if the preview need to be shortened
         - this may lead to slightly different preview lengths
+- `<StickyNoteNode />`
+    - if not selected it always is displayed under other nodes and edges
+    - it was necessary to set `z-index` on node and edge level, not for their containers
 
 ### Fixed
 
diff --git a/src/cmem/react-flow/nodes/_stickynote.scss b/src/cmem/react-flow/nodes/_stickynote.scss
index 89ac54c62..081e20c23 100644
--- a/src/cmem/react-flow/nodes/_stickynote.scss
+++ b/src/cmem/react-flow/nodes/_stickynote.scss
@@ -1,4 +1,7 @@
 .react-flow__node-stickynote {
+    &:not(.selected) {
+        z-index: -2 !important;
+    }
     .#{$eccgui}-graphviz__node {
         &:not(.#{$eccgui}-graphviz__node--minimal-rectangular),
         &:not(.#{$eccgui}-graphviz__node--minimal-circular) {
diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss
index 1f7e646a2..28b0fa523 100644
--- a/src/extensions/react-flow/_react-flow_v12.scss
+++ b/src/extensions/react-flow/_react-flow_v12.scss
@@ -65,6 +65,17 @@
 
 .react-flow .react-flow__edges {
     position: absolute;
+
+    /* we handle z-index direct for individual edges to re-order them together with the nodes */
+    z-index: unset;
+
+    & > svg[style*="z-index: 0"] {
+        z-index: -1 !important;
+
+        &:has(g.selected) {
+            z-index: 0 !important;
+        }
+    }
 }
 
 .react-flow .react-flow__edges svg:not(.#{$eccgui}-icon) {
@@ -105,6 +116,10 @@ svg.react-flow__connectionline {
     transform-origin: 0 0;
 }
 
+.react-flow .react-flow__nodes {
+    z-index: unset;
+}
+
 .react-flow__node {
     position: absolute;
     box-sizing: border-box;