Refactor components and styles for consistency and clarity

app/src/styles/pages/realTimeViz.scss

@@ -36,7 +36,7 @@
     }
   }
 
-  .zoon-wrapper {
+  .zone-wrapper {
     display: flex;
     background-color: var(--background-color);
     position: absolute;
@@ -55,11 +55,16 @@
     }
 
     .arrow {
-      background-color: var(--accent-color);
+      background-color: var(--highlight-accent-color);
       color: var(--background-color);
     }
 
     .zones-wrapper {
+      padding: 6px;
+      display: flex;
+      gap: 6px;
+      border-radius: #{$border-radius-medium};
+      overflow-x: auto;
       &::-webkit-scrollbar {
         display: none;
       }
@@ -82,28 +87,10 @@
     }
   }
 
-  .zoon-wrapper.bottom {
+  .zone-wrapper.bottom {
     bottom: 210px;
   }
 
-  @media (max-width: 1024px) {
-    width: 80%; // Increase width to take more space on smaller screens
-    height: 500px; // Reduce height to fit smaller screens
-    left: 50%; // Center horizontally
-
-    .main-container {
-      margin: 0 15px; // Reduce margin for better spacing
-    }
-
-    .zoon-wrapper {
-      bottom: 5px; // Adjust position for smaller screens
-
-      &.bottom {
-        bottom: 150px; // Adjust for bottom placement
-      }
-    }
-  }
-
   .content-container {
     display: flex;
     height: 100vh;
@@ -118,7 +105,7 @@
     margin: 0 30px;
     transition: height 0.3s ease, margin 0.3s ease;
 
-    .zoon-wrapper {
+    .zone-wrapper {
       display: flex;
       background-color: rgba(224, 223, 255, 0.5);
       position: absolute;
@@ -309,7 +296,7 @@
 }
 
 .playingFlase {
-  .zoon-wrapper.bottom {
+  .zone-wrapper.bottom {
     bottom: 300px;
   }
 }
@@ -501,13 +488,10 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
   border: none;
   cursor: pointer;
-  font-size: 20px;
-  padding: 6px;
   z-index: 10;
+  height: 100%;
 }
 
 .left-arrow {