updated ui

app/src/styles/pages/realTimeViz.scss

@@ -93,6 +93,7 @@
     max-width: 80%;
     overflow: auto;
     max-width: calc(100% - 450px);
+    z-index: 11000000000;
 
     &::-webkit-scrollbar {
       display: none;
@@ -114,7 +115,7 @@
   }
 
   .zoon-wrapper.bottom {
-    bottom: 210px;
+    bottom: 310px;
   }
 
   .content-container {
@@ -137,11 +138,35 @@
   position: absolute;
   top: 50%;
   left: calc(270px + 45px);
-  transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
   transform-origin: left;
-  width: 100%;
+  transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
+  width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6);
+  z-index: 100;
+
+
+
+  &.top {
+    transform: scale(1.5);
+  }
+
+  &.right {
+    transform: scale(1.5);
+  }
+
+  &.bottom {
+    transform: scale(1.5);
+  }
+
+  &.left {
+    transform: scale(1.5);
+  }
+
+  .zoon-wrapper {
+    transform:translate(-50%, 0) scale(1.5);
+  }
 }
 
+
 // Side Buttons
 .side-button-container {
   position: absolute;
@@ -188,35 +213,39 @@
   }
 
   &.top {
-    top: -30px;
+    top: -35px;
     left: 50%;
     transform: translateX(-50%);
     flex-direction: row;
     gap: 6px;
+    transform: scale(1.5);
   }
 
   &.right {
-    right: -30px;
+    right: -35px;
     top: 50%;
     transform: translateY(-50%);
     flex-direction: column;
     gap: 6px;
+    transform: scale(1.5);
   }
 
   &.bottom {
-    bottom: -30px;
+    bottom: -35px;
     left: 50%;
     transform: translateX(-50%);
     flex-direction: row;
     gap: 6px;
+    transform: scale(1.5);
   }
 
   &.left {
-    left: -30px;
+    left: -35px;
     top: 50%;
     transform: translateY(-50%);
     flex-direction: column;
     gap: 6px;
+    transform: scale(1.5);
   }
 }