refactor(stlyes): use react-flow__container helper

src/style.css

@@ -5,12 +5,10 @@
   overflow: hidden;
 }
 
-.react-flow__renderer,
-.react-flow__pane,
-.react-flow__selectionpane {
+.react-flow__container {
+  position: absolute;
   width: 100%;
   height: 100%;
-  position: absolute;
   top: 0;
   left: 0;
 }
@@ -19,6 +17,11 @@
   z-index: 1;
 }
 
+.react-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+}
+
 .react-flow__renderer {
   z-index: 4;
 }
@@ -27,17 +30,9 @@
   z-index: 5;
 }
 
-.react-flow__selection {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .react-flow__edges {
-  position: absolute;
-  top: 0;
-  left: 0;
   pointer-events: none;
+  overflow: visible;
 }
 
 .react-flow__edge {
@@ -81,9 +76,6 @@
 }
 
 .react-flow__nodes {
-  position: absolute;
-  width: 100%;
-  height: 100%;
   pointer-events: none;
   transform-origin: 0 0;
 }
@@ -98,11 +90,6 @@
 
 .react-flow__nodesselection {
   z-index: 3;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
   transform-origin: left top;
   pointer-events: none;
 
@@ -153,14 +140,6 @@
 
 /* additional components */
 
-.react-flow__background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .react-flow__controls {
   position: absolute;
   z-index: 5;
@@ -184,10 +163,3 @@
   bottom: 10px;
   right: 10px;
 }
-
-.react-flow__container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}