fix: Fixed Scrollable tab styling.

src/components/ScrollableTab.jsx

@@ -3,6 +3,8 @@ import { Tabs, Tab } from "react-tabs-scrollable";
 import "react-tabs-scrollable/dist/rts.css";
 import { getHeatmapData } from "./webpage_container/StudySite";
 import { pushToMouseLog } from "../core/log/SensorLogger";
+import { playTabModelSonification } from "../core/audio/AudioHandler";
+import { Divider } from "@geist-ui/core";
 
 var amountTabs = 0;
 var reachedEndValue = false;
@@ -19,7 +21,6 @@ function ScrollableTab({ onActiveTabChange, children }) {
   // define a onClick function to bind the value on tab click
   const onTabClick = (e, index) => {
     const buttonAttributes = e.target.attributes;
-    console.log(buttonAttributes);
     const actionType = buttonAttributes["actionType"]
       ? buttonAttributes.getNamedItem("actionType").value
       : "";
@@ -62,6 +63,8 @@ function ScrollableTab({ onActiveTabChange, children }) {
       reachedEndValue = true;
     }
 
+    playTabModelSonification();
+
     if (reachedEndValue && endValueVisible) {
       //this.playChordEndSound();
       if (rightSideEnd) {
@@ -114,10 +117,27 @@ function ScrollableTab({ onActiveTabChange, children }) {
     );
   });
 
-  const tabsStyle = { position: "absolute", bottom: "0", width: "100vw" };
+  const tabsStyle = {
+    position: "fixed",
+    bottom: "0",
+    width: "100vw",
+    zIndex: "998",
+    backgroundColor: "white",
+  };
 
   return (
-    <div style={tabsStyle}>
+    <div
+      style={tabsStyle}
+      onClick={() => {}}
+      onTouchStart={(event) => {
+        const eventElement = event.target;
+
+        if (eventElement.nodeName === "BUTTON") {
+          onHoverTab(eventElement.id);
+        }
+      }}
+    >
+      <Divider />
       <Tabs
         onMouseOver={() => onHoverElement()}
         activeTab={activeTab}

src/index.css

@@ -21,14 +21,17 @@ code {
   width: 100%;
   height: 100%;
   pointer-events: none; /* Ensure it doesn't interfere with page interaction */
+  z-index: 999;
 }
 
 .heatmap-canvas {
   pointer-events: none;
+  z-index: 999;
 }
 
 canvas {
-  opacity: 0;
+  opacity: 1;
+  z-index: 999;
 }
 
 #studySiteContainer {