updated realTimeViz panel style

app/src/styles/components/tools.scss

@@ -4,7 +4,7 @@
 .tools-container {
   @include flex-center;
   position: fixed;
-  bottom: 50px;
+  bottom: 32px;
   left: 50%;
   transform: translate(-50%, 0);
   padding: 8px;

app/src/styles/layout/sidebar.scss

@@ -472,6 +472,15 @@
         font-size: var(--font-weight-regular);
         color: #4a4a4a;
 
+        .reviewChart {
+          width: 100%;
+
+          .floating {
+            width: 100%;
+
+          }
+        }
+
         .selectedWidget {
           padding: 6px 12px;
           border-top: 1px solid var(--border-color);

app/src/styles/pages/realTimeViz.scss

@@ -7,7 +7,7 @@
   border-radius: 20px;
   box-shadow: $box-shadow-medium;
   width: calc(100% - (320px + 270px + 90px));
-  height: calc(100% - (200px + 80px));
+  height: calc(100% - (250px));
   position: absolute;
   top: 50%;
   left: calc(270px + 45px);
@@ -16,6 +16,13 @@
   transition: all 0.2s;
   z-index: #{$z-index-default};
 
+  .realTime-viz-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: -1;
+  }
+
   .floating {
     width: 100%;
     max-width: 250px;
@@ -109,7 +116,7 @@
   }
 
   .zone-wrapper.bottom {
-    bottom: 210px;
+    bottom: calc(var(--realTimeViz-container-height) * 0.27);
   }
 
   .content-container {
@@ -182,6 +189,7 @@
     .panel-content {
       position: relative;
       height: 100%;
+      width: 100%;
       padding: 10px;
       display: flex;
       flex-direction: column;
@@ -194,7 +202,6 @@
 
       .chart-container {
         width: 100%;
-        height: 25% !important;
         min-height: 150px;
         max-height: 100%;
         // border: 1px dashed var(--background-color-gray);
@@ -203,6 +210,7 @@
         padding: 6px 0;
         background-color: var(--background-color);
         position: relative;
+        padding: 0 10px;
 
         .kebab {
           width: 30px;
@@ -287,15 +295,17 @@
     &.bottom-panel {
       left: 0;
       right: 0;
+      min-height: 150px;
 
       .panel-content {
         display: flex;
         flex-direction: row;
         height: 100%;
+        width: 100%;
+        min-height: 150px;
 
         .chart-container {
-          height: 100% !important;
-          width: 20%;
+
           min-width: 150px;
         }
       }
@@ -314,17 +324,42 @@
       top: 0;
       bottom: 0;
 
-      .chart-container {
-        width: 100%;
-        height: 180px;
-      }
+
     }
 
     &.right-panel {
       right: 0;
       top: 0;
-      bottom: 0;
+      bottom: 0
+    }
 
+    &.left-panel,
+    &.right-panel {
+      min-width: 150px;
+
+      .panel-content {
+        flex-direction: column;
+        width: 100%;
+
+
+        gap: 6px;
+
+        .chart-container {
+          width: 100%;
+
+
+          min-height: 150px;
+          max-height: 100%;
+          // border: 1px dashed var(--background-color-gray);
+          border-radius: 8px;
+          box-shadow: var(--box-shadow-medium);
+          padding: 6px 0;
+          background-color: var(--background-color);
+          position: relative;
+        }
+
+
+      }
     }
   }
 
@@ -335,7 +370,7 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: 300px;
+    bottom: calc(var(--realTimeViz-container-height) * 0.25);
   }
 }
 
@@ -732,9 +767,9 @@
 
 .editWidgetOptions {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  // top: 50%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
   background-color: var(--background-color);
   z-index: 3;
   display: flex;
@@ -742,6 +777,8 @@
   border-radius: 6px;
   overflow: hidden;
 
+  min-width: 150px;
+
   .option {
     padding: 8px 10px;
     color: var(--text-color);