fix: Not sure what I did, but fixed some of the mouse tracking issues.

src/App.js

@@ -180,7 +180,7 @@ function App() {
             path="/study-page-2"
             element={
               <React.Suspense fallback={<>...</>}>
-                <StartPage2 redirectLoc={latinSquareOrder[2]} />
+                <StartPage2 />
               </React.Suspense>
             }
           />

src/components/ScrollableTab.jsx

@@ -114,7 +114,7 @@ function ScrollableTab({ onActiveTabChange, children }) {
     );
   });
 
-  const tabsStyle = {}; //{position: "fixed", bottom: "0"};
+  const tabsStyle = { position: "absolute", bottom: "0", width: "100vw" };
 
   return (
     <div style={tabsStyle}>

src/components/webpage_container/StudySite.jsx

@@ -35,6 +35,7 @@ export function StudySite(props) {
     document.documentElement.style.height = height;
 
     if (heatmapInstance === undefined) {
+      document.getElementById("studySiteContainer").style.height = height;
       heatmapInstance = h337.create({
         container: document.getElementById("studySiteContainer"),
         radius: 40,
@@ -50,6 +51,10 @@ export function StudySite(props) {
       heatmapInstance.addData({ x: x, y: y, value: 1 });
     });
 
+    document.addEventListener("scroll", function (event) {
+      updateHeatmapSize();
+    });
+
     // Function to capture clicks
     document.addEventListener("click", function (event) {
       var x = event.pageX;
@@ -57,13 +62,31 @@ export function StudySite(props) {
 
       // Add more value for clicks
       heatmapInstance.addData({ x: x, y: y, value: 5 });
+      updateHeatmapSize();
     });
 
     // Function to update heatmap container size on resize
     function updateHeatmapSize() {
       var container = document.getElementById("heatmapOverlay");
-      container.style.width = document.body.scrollWidth + "px";
+      container.style.width =
+        document.getElementById("root").style.width + "px";
       container.style.height = document.body.scrollHeight + "px";
+
+      document.getElementById("studySiteContainer").style.width =
+        document.getElementById("root").style.width + "px";
+      document.getElementById("studySiteContainer").style.height =
+        document.body.scrollHeight + "px";
+
+      const heatmapData = heatmapInstance.getData();
+      for (var el of document.getElementsByTagName("canvas")) {
+        el.remove();
+      }
+      heatmapInstance = h337.create({
+        container: document.getElementById("studySiteContainer"),
+        radius: 40,
+      });
+      heatmapInstance.setData(heatmapData);
+      heatmapInstance.setDataMax(HEATMAP_MAX);
     }
 
     const handleStart = (evt) => {
@@ -162,5 +185,5 @@ export function StudySite(props) {
 }
 
 export function getHeatmapData() {
-  return (heatmapInstance !== undefined) ? heatmapInstance.getData() : {};
+  return heatmapInstance !== undefined ? heatmapInstance.getData() : {};
 }

src/index.css

@@ -31,6 +31,11 @@ canvas {
   opacity: 0;
 }
 
+#studySiteContainer {
+  min-height: 100vh;
+  width: 95%;
+}
+
 .centeredLogo {
   display: block;
   margin: 0 auto;

src/pages/study_site_2/StartPage2.jsx

@@ -42,14 +42,10 @@ const tabContent = [
   (<HotelInformation />),
 ];
 
-function StartPage2({ redirectLoc }) {
+function StartPage2() {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
-  var saveMouseLog = function () {
-    pushToMouseLog(getHeatmapData());
-  };
-
-  var onActiveTabChange = (index) => {
+  const onActiveTabChange = (index) => {
     setActiveTabIndex(index);
   };
 
@@ -68,7 +64,6 @@ function StartPage2({ redirectLoc }) {
       />
       <Spacer h={3} />
       <h4>Hotel Le Laboratoire</h4>
-      <Spacer h={3} />
       {tabContent[activeTabIndex]}
       <ScrollableTab onActiveTabChange={onActiveTabChange}>
         <Tab actionType="text">