From 1023dd0ad8bd97454a5da204ee9bff9588ec3279 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Thu, 13 Jun 2024 16:54:58 +0200
Subject: [PATCH] fix: Fixed weird scrolling issue with not enough scrolling
 space.

---
 src/components/ScrollableTab.jsx                   |  1 +
 src/components/webpage_container/StudySite.jsx     |  7 +++++--
 src/pages/study_site_2/StartPage2.jsx              | 12 ++++++++++++
 src/pages/study_site_3/StartPage3.jsx              | 12 ++++++++++++
 src/pages/study_site_5/StartPage5.jsx              | 14 +++++++++++++-
 .../study_site_5/tab_content/PropertyFeatures.jsx  |  2 +-
 6 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx
index afe31ab..9641bd8 100644
--- a/src/components/ScrollableTab.jsx
+++ b/src/components/ScrollableTab.jsx
@@ -136,6 +136,7 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
           onHoverTab(eventElement.id);
         }
       }}
+      id="scrollTabList"
     >
       <Divider />
       <Tabs
diff --git a/src/components/webpage_container/StudySite.jsx b/src/components/webpage_container/StudySite.jsx
index 5809216..55a016a 100644
--- a/src/components/webpage_container/StudySite.jsx
+++ b/src/components/webpage_container/StudySite.jsx
@@ -67,15 +67,18 @@ export function StudySite(props) {
 
     // Function to update heatmap container size on resize
     function updateHeatmapSize() {
+      const scrollableTabList = document.getElementById("scrollTabList");
+      const tabSize = scrollableTabList ? scrollableTabList : 0;
+
       var container = document.getElementById("heatmapOverlay");
       container.style.width =
         document.getElementById("root").style.width + "px";
-      container.style.height = document.body.scrollHeight + "px";
+      container.style.height = document.body.scrollHeight + tabSize + "px";
 
       document.getElementById("studySiteContainer").style.width =
         document.getElementById("root").style.width + "px";
       document.getElementById("studySiteContainer").style.height =
-        document.body.scrollHeight + "px";
+        document.body.scrollHeight + tabSize + "px";
 
       const heatmapData = heatmapInstance.getData();
       for (var el of document.getElementsByTagName("canvas")) {
diff --git a/src/pages/study_site_2/StartPage2.jsx b/src/pages/study_site_2/StartPage2.jsx
index 54860f0..c879211 100644
--- a/src/pages/study_site_2/StartPage2.jsx
+++ b/src/pages/study_site_2/StartPage2.jsx
@@ -42,10 +42,22 @@ const tabContent = [
   <HotelInformation />,
 ];
 
+var sizeAdded = false;
+
 function StartPage2() {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
   const onActiveTabChange = (index) => {
+    if (!sizeAdded) {
+      const scrollableTabList = document.getElementById("scrollTabList");
+      const tabSize = scrollableTabList ? scrollableTabList.offsetHeight : 0;
+
+      var container = document.getElementById("heatmapOverlay");
+      container.style.height = document.body.scrollHeight + tabSize + "px";
+      document.getElementById("studySiteContainer").style.height =
+        document.body.scrollHeight + tabSize + "px";
+      sizeAdded = true;
+    }
     setActiveTabIndex(index);
   };
 
diff --git a/src/pages/study_site_3/StartPage3.jsx b/src/pages/study_site_3/StartPage3.jsx
index 29dc289..a66a8c8 100644
--- a/src/pages/study_site_3/StartPage3.jsx
+++ b/src/pages/study_site_3/StartPage3.jsx
@@ -31,6 +31,8 @@ import ProgrammeEvents from "./tab_content/ProgrammeEvents";
 import StudentLife from "./tab_content/StudentLife";
 import AboutUVV from "./tab_content/AboutUVV";
 
+var sizeAdded = false;
+
 function StartPage3({ redirectLoc }) {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
@@ -48,6 +50,16 @@ function StartPage3({ redirectLoc }) {
   ];
 
   const onActiveTabChange = (index) => {
+    if (!sizeAdded) {
+      const scrollableTabList = document.getElementById("scrollTabList");
+      const tabSize = scrollableTabList ? scrollableTabList.offsetHeight : 0;
+
+      var container = document.getElementById("heatmapOverlay");
+      container.style.height = document.body.scrollHeight + tabSize + "px";
+      document.getElementById("studySiteContainer").style.height =
+        document.body.scrollHeight + tabSize + "px";
+      sizeAdded = true;
+    }
     setActiveTabIndex(index);
   };
 
diff --git a/src/pages/study_site_5/StartPage5.jsx b/src/pages/study_site_5/StartPage5.jsx
index a06e616..586ba97 100644
--- a/src/pages/study_site_5/StartPage5.jsx
+++ b/src/pages/study_site_5/StartPage5.jsx
@@ -27,6 +27,8 @@ import PropertyOutsideSpace from "./tab_content/PropertyOutsideSpace";
 import PropertyNotices from "./tab_content/PropertyNotices";
 import PropertyContact from "./tab_content/PropertyContact";
 
+var sizeAdded = false;
+
 function StartPage5({ redirectLoc }) {
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
@@ -44,6 +46,16 @@ function StartPage5({ redirectLoc }) {
   ];
 
   const onActiveTabChange = (index) => {
+    if (!sizeAdded) {
+      const scrollableTabList = document.getElementById("scrollTabList");
+      const tabSize = scrollableTabList ? scrollableTabList.offsetHeight : 0;
+
+      var container = document.getElementById("heatmapOverlay");
+      container.style.height = document.body.scrollHeight + tabSize + "px";
+      document.getElementById("studySiteContainer").style.height =
+        document.body.scrollHeight + tabSize + "px";
+      sizeAdded = true;
+    }
     setActiveTabIndex(index);
   };
 
@@ -68,7 +80,7 @@ function StartPage5({ redirectLoc }) {
           <Spacer inline w={0.35} />
           Overview
         </Tab>
-        <Tab actionType="button" redirectLoc={redirectLoc}>
+        <Tab actionType="text">
           <Star viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />
           Features
diff --git a/src/pages/study_site_5/tab_content/PropertyFeatures.jsx b/src/pages/study_site_5/tab_content/PropertyFeatures.jsx
index dcb41a2..f4ff082 100644
--- a/src/pages/study_site_5/tab_content/PropertyFeatures.jsx
+++ b/src/pages/study_site_5/tab_content/PropertyFeatures.jsx
@@ -6,7 +6,7 @@ function PropertyFeatures() {
       <li>Open Plan Living and Dining Area</li>
       <li>Hardwood Floors</li>
       <li>High-Speed Internet</li>
-      <li>In-Uni Laundry</li>
+      <li>In-Unit Laundry</li>
     </ul>
   );
 }