Fix stakeholder Details view on mobile (#2689)

Author: Giolii

client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.jsx

@@ -40,7 +40,6 @@ import {
   useSelectedOrganization,
   useUserCoordinates,
   useWidget,
-  usePosition,
 } from "../../../../appReducer";
 import { useToasterContext } from "../../../../contexts/toasterContext";
 import SEO from "../../../SEO";
@@ -96,8 +95,6 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
   const navigate = useNavigate();
   const { setToast } = useToasterContext();
   const { tenantTimeZone } = useSiteContext();
-  const position = usePosition();
-  const [paddingBottom, setPaddingBottom] = useState(30);
 
   const foodTypes = useMemo(() => {
     return (
@@ -113,32 +110,6 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
     );
   }, [selectedOrganization]);
 
-  useEffect(() => {
-    const windowHeight = window.innerHeight / 100;
-    if (
-      position.y === (100 / window.innerHeight) * 54 * windowHeight ||
-      position.y === 0 * windowHeight
-    ) {
-      setPaddingBottom(200);
-    } else if (position.y === 17 * windowHeight) {
-      setPaddingBottom(300);
-    }
-  }, [position]);
-
-  // USE EFFECT BASED ON THIS FUNCTION IN Mobile.js
-  // const handleStop = (e, ui) => {
-  //   const windowHeight = window.innerHeight / 100;
-  //   let newY;
-  //   if (ui.y < 20 * windowHeight) {
-  //     newY = hasAdvancedFilterFeatureFlag ? (100 / window.innerHeight) * 60 : 0;
-  //   } else if (ui.y > 20 * windowHeight && ui.y < 40 * windowHeight) {
-  //     newY = 17;
-  //   } else if (ui.y > 40 * windowHeight) {
-  //     newY = 54;
-  //   }
-  //   setPosition({ x: 0, y: newY * windowHeight });
-  // };
-
   useEffect(() => {
     if (selectedOrganization?.id) {
       analytics.postEvent("viewDetail", {

client/src/components/FoodSeeker/SearchResults/layouts/Mobile.jsx

@@ -1,19 +1,23 @@
-import { Box, Grid, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import { useEffect, useState } from "react";
 import Draggable from "react-draggable";
 import { useFilterPanel } from "appReducer";
 import AttributionInfo from "../AttributionInfo";
 import { useAppDispatch } from "../../../../appReducer";
 import useFeatureFlag from "hooks/useFeatureFlag";
 
-const overlay = {
+const getOverlayStyle = (positionY) => ({
   position: "absolute",
   width: "100%",
-  height: "100%",
+  top: 0,
+  bottom: `${positionY}px`,
   backgroundColor: "transparent",
   zIndex: 1000,
   borderRadius: "10px",
-};
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+});
 
 const MobileLayout = ({ filters, map, list, showList }) => {
   const filterPanelOpen = useFilterPanel();
@@ -25,14 +29,6 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     y: initialY * (window.innerHeight / 100),
   });
 
-  // disable body scroll
-  useEffect(() => {
-    window.scrollTo({
-      top: 0,
-    });
-    document.body.style.overflow = "hidden";
-  }, []);
-
   useEffect(() => {
     dispatch({ type: "POSITION", position: position });
   }, [position, dispatch]);
@@ -48,6 +44,10 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     setPosition({ x: 0, y: newY * (window.innerHeight / 100) });
   }, [showList, filterPanelOpen, hasAdvancedFilterFeatureFlag]);
 
+  const handleDrag = (e, ui) => {
+    setPosition({ x: 0, y: ui.y });
+  };
+
   const handleStop = (e, ui) => {
     const windowHeight = window.innerHeight / 100;
     const minY = hasAdvancedFilterFeatureFlag
@@ -75,7 +75,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
 
   return (
     <>
-      {filters}
+      <Box>{filters}</Box>
       <Box
         sx={{
           height: window.innerHeight,
@@ -100,6 +100,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
         {list && (
           <Draggable
             position={position}
+            onDrag={handleDrag}
             onStop={handleStop}
             handle=".handle"
             bounds={{ top: 0, bottom: minY * (window.innerHeight / 100) }}
@@ -111,8 +112,7 @@ const MobileLayout = ({ filters, map, list, showList }) => {
               backgroundColor: "white",
             }}
           >
-            <Box sx={overlay}>
-              <Grid container spacing={0}></Grid>
+            <Box sx={getOverlayStyle(position.y)}>
               <Box
                 sx={{
                   width: "100vw",
@@ -143,8 +143,9 @@ const MobileLayout = ({ filters, map, list, showList }) => {
               <Box
                 sx={{
                   backgroundColor: "white",
-                  height: "100%",
+                  flex: 1,
                   width: "100vw",
+                  overflow: "hidden",
                 }}
               >
                 {list}