From 696c856147433c1832f76141e39694e5214ae0d3 Mon Sep 17 00:00:00 2001
From: Belen Garcia Martinez <belengm.dev@gmail.com>
Date: Tue, 21 May 2024 11:54:30 -0500
Subject: [PATCH] Removed double scrolling (#2143)

* fixed bug in scrolling other pages

* fixed bug for good

* removed extra scrolling

* disabled scroll in mobile food seeker page

* changing draggable positions

* adjusting dynamic padding

* tweaked some paddings
---
 client/src/Routes.js                          |  2 +-
 .../StakeholderDetails/StakeholderDetails.js  | 18 ++++++++--------
 .../SearchResults/layouts/Mobile.js           | 21 +++++++++++++------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/client/src/Routes.js b/client/src/Routes.js
index 6103a1313..5a9fe8893 100644
--- a/client/src/Routes.js
+++ b/client/src/Routes.js
@@ -208,7 +208,7 @@ function AppWrapper() {
         backgroundColor: "#fff",
         margin: "0",
         height: "100%",
-        overflow: "hidden",
+        overflowX: "hidden",
       }}
     >
       <Header />
diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js b/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js
index 7a25b94eb..9413a4c66 100644
--- a/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js
+++ b/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js
@@ -94,11 +94,11 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
 
   useEffect(()=> {
     const windowHeight = window.innerHeight / 100;
-    if(position.y === (100 / window.innerHeight * 60) * windowHeight || position.y === 5 * windowHeight){
-      setPaddingBottom(300)
+    if(position.y === (100 / window.innerHeight * 54) * windowHeight || position.y === 0 * windowHeight){
+      setPaddingBottom(200)
     }
-    else if(position.y === 25 * windowHeight){
-      setPaddingBottom(window.innerHeight / 1.3)
+    else if(position.y === 17 * windowHeight){
+      setPaddingBottom(300)
     }
     
   },[position])
@@ -108,11 +108,11 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
   //   const windowHeight = window.innerHeight / 100;
   //   let newY;
   //   if (ui.y < 20 * windowHeight) {
-  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 5;
+  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 0;
   //   } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
-  //     newY = 25;
+  //     newY = 17;
   //   } else if (ui.y > 40 * windowHeight) {
-  //     newY = 57;
+  //     newY = 54;
   //   }
   //   setPosition({ x: 0, y: newY * windowHeight });
   // };
@@ -297,7 +297,7 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
           alignItems="flex-end"
           sx={{
             width: 1,
-            padding: isDesktop ? "1.5rem 35px 0 65px" : "1.5rem",
+            padding: isDesktop ? "1.5rem 35px 0 65px" : "1rem 1.5rem",
           }}
         >
           <Typography
@@ -359,7 +359,7 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
           sx={{
             minHeight: "6rem",
             overflowY: "scroll",
-            padding: isDesktop ? "38px 35px 0 65px" : "38px 23px 0",
+            padding: isDesktop ? "38px 35px 0 65px" : "3px 23px 0",
             paddingBottom: isDesktop ? "0" : `${paddingBottom}px`,
           }}
         >
diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
index 29acf82bc..cd0acabd2 100644
--- a/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
+++ b/client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js
@@ -31,6 +31,14 @@ const MobileLayout = ({ filters, map, list, showList }) => {
 
   const isListPanelVisible = useIsListPanelVisible()
 
+  // disable body scroll
+  useEffect(() => {
+    window.scrollTo({
+      top: 0
+    });
+    document.body.style.overflow = "hidden"
+  }, [])
+
 
   // List goes up when clicking the map
   useEffect(() => {
@@ -51,9 +59,9 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     if (filterPanelOpen) {
       newY = 100;
     } else if (hasAdvancedFilterFeatureFlag) {
-      newY = showList ? ((100 / window.innerHeight) * 60) : 57;
+      newY = showList ? ((100 / window.innerHeight) * 60) : 54;
     } else {
-      newY = showList ? 5 : 57;
+      newY = showList ? 0 : 54;
     }
     setPosition({ x: 0, y: newY * (window.innerHeight / 100) });
   }, [showList, filterPanelOpen, hasAdvancedFilterFeatureFlag]);
@@ -62,11 +70,11 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     const windowHeight = window.innerHeight / 100;
     let newY;
     if (ui.y < 20 * windowHeight) {
-      newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 5;
+      newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 0;
     } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
-      newY = 25;
+      newY = 17;
     } else if (ui.y > 40 * windowHeight) {
-      newY = 57;
+      newY = 54;
     }
     setPosition({ x: 0, y: newY * windowHeight });
   };
@@ -82,6 +90,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
           display: "flex",
           flexDirection: "column",
           position: "relative",
+          overflow: 'hidden'
         }}
       >
         <Box sx={{ flex: 1 }}>{map}</Box>
@@ -198,7 +207,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
               <Box
                 sx={{
                   backgroundColor: "white",
-                  height: "100vh",
+                  height: "100%",
                   width: "100vw",
                 }}
               >