Re-index the display levels of edges and nodes (CMEM-7251)

CHANGELOG.md

@@ -75,6 +75,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
 

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) {

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;