updated ui

app/src/styles/abstracts/variables.scss

@@ -71,7 +71,7 @@ $font-roboto: "Roboto", sans-serif; // Roboto font
 // Font sizes (converted to rem using a utility function)
 $tiny: 0.625rem; // Extra small text (10px)
 $small: 0.75rem; // Small text (12px)
-$regular: 0.875rem; // Default text size (14px)
+$regular: 0.8rem; // Default text size (14px)
 $large: 1rem; // Large text size (16px)
 $xlarge: 1.125rem; // Extra large text size (18px)
 $xxlarge: 1.5rem; // Double extra large text size (24px)
@@ -89,6 +89,10 @@ $bold-weight: 600; // Bold font weight
 
 // Z-index variables for layering
 $z-index-drei-html: 1; // For drei's Html components
+$z-index-default: 1; // For drei's Html components
+$z-index-marketplace: 2; // For drei's Html components
+$z-index-tools: 3; // For drei's Html components
+$z-index-negative: -1; // For drei's Html components
 $z-index-ui-base: 10; // Base UI elements
 $z-index-ui-overlay: 20; // Overlay UI elements (e.g., modals, tooltips)
 $z-index-ui-popup: 30; // Popups, dialogs, or higher-priority UI elements

app/src/styles/components/moduleToggle.scss

@@ -10,6 +10,7 @@
   left: 50%;
   top: 32px;
   transform: translateX(-50%);
+  z-index: #{$z-index-tools};
   .module-list {
     display: flex;
     align-items: center;

app/src/styles/components/tools.scss

@@ -14,7 +14,7 @@
   width: fit-content;
   transition: width 0.2s;
   background-color: var(--background-color);
-
+  z-index: #{$z-index-tools};
   .split {
     height: 20px;
     width: 2px;
@@ -78,7 +78,7 @@
         box-shadow: #{$box-shadow-medium};
         padding: 8px;
         border-radius: #{$border-radius-large};
-
+        background: var(--background-color);
         .option-list {
           margin: 4px 0;
           display: flex;

app/src/styles/layout/sidebar.scss

@@ -9,7 +9,7 @@
   background-color: var(--background-color);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
-
+  z-index: #{$z-index-tools};
   .header-container {
     @include flex-space-between;
     padding: 10px;
@@ -179,6 +179,7 @@
   background-color: var(--background-color);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
+  z-index: #{$z-index-tools};
 
   .header-container {
     @include flex-space-between;

app/src/styles/layout/toast.scss

@@ -1,9 +1,13 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
 .toast-container {
   position: fixed;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   gap: 10px;
+  z-index: #{$z-index-ui-highest};
 }
 
 .toast-container.bottom-center {

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);
   }
 }