fix: Fixed weird scrolling issue with not enough scrolling space.

src/components/ScrollableTab.jsx

@@ -136,6 +136,7 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
           onHoverTab(eventElement.id);
         }
       }}
+      id="scrollTabList"
     >
       <Divider />
       <Tabs

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")) {

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

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

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

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