Merge conflicts remote-tracking branch 'origin/main' into ui

app/src/styles/pages/realTimeViz.scss

@@ -1,5 +1,5 @@
 @use "../abstracts/variables.scss" as *;
-@use "../abstracts/mixins" as *;
+@use "../abstracts/mixins.scss" as *;
 
 // Main Container
 .realTime-viz {
@@ -68,7 +68,6 @@
       &::-webkit-scrollbar {
         display: none;
       }
-
     }
 
     .zone {
@@ -149,6 +148,7 @@
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
+    border-radius: 6px;
     overflow: visible !important;
     z-index: $z-index-tools;
 
@@ -156,13 +156,10 @@
       position: relative;
       height: 100%;
       padding: 10px;
-
-
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 6px;
       background-color: var(--background-color);
-      border-radius: #{$border-radius-small};
 
       &::-webkit-scrollbar {
         display: none;
@@ -170,8 +167,7 @@
 
       .chart-container {
         width: 100%;
-        height: 24% !important;
-
+        height: 25% !important;
         min-height: 150px;
         max-height: 100%;
         border: 1px dotted #a9a9a9;
@@ -188,7 +184,7 @@
           top: 0px;
           right: 0px;
           z-index: 10;
-
+          cursor: pointer;
           @include flex-center;
         }
 
@@ -207,8 +203,6 @@
 
           box-shadow: var(--box-shadow-medium);
 
-
-
           .btn {
             display: flex;
             gap: 6px;
@@ -318,7 +312,6 @@
   border-radius: 2px;
   transition: transform 0.3s ease;
   box-shadow: #{$box-shadow-medium};
-  // outline: 1px solid var(--border-color);
 
   .extra-Bs {
     display: flex;
@@ -348,7 +341,9 @@
     transition: background-color 0.3s ease;
     width: 18px;
     height: 18px;
-    @include flex-center;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
@@ -488,10 +483,6 @@
   }
 }
 
-
-
-
-
 .arrow {
   position: absolute;
   top: 50%;
@@ -520,4 +511,4 @@
 .zone.active {
   background-color: #007bff;
   color: white;
-}
+}