Fix: Ensure SharePopup properly overlaps Footer

src/App.css

@@ -35,4 +35,4 @@
 
 .host {
   color: grey;
-}
+}

src/App.jsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { Link, useOutletContext, useSearchParams } from "react-router-dom";
 import "./App.css";
 import CategoryTabs from "./components/CategoryTabs/CategoryTabs";
 import ProductCard from "./components/ProductCard/ProductCard";
@@ -13,6 +13,8 @@ function App() {
   const [places, setPlaces] = useState([]);
   const [selectPlaceId, setSelectPlaceId] = useState(null);
   const [searchParams] = useSearchParams();
+
+  const { modalIsVisible, setModalIsVisible, closeModal } = useOutletContext();
 
   const histogramData = [
     { from: 16, to: 23, count: 2 },
@@ -72,6 +74,9 @@ function App() {
               key={place.id}
               images={place.images}
               onClick={() => handlePlaceClick(place.id)}
+              modalIsVisible={modalIsVisible}
+              setModalIsVisible={setModalIsVisible}
+              closeModal={closeModal}
             >
               <Link to={`/rooms/${place.id}`}>
                 <h2 className="title">{place.title}</h2>

src/components/ProductCard/ProductCard.jsx

@@ -1,22 +1,21 @@
 import { useEffect, useState } from "react";
 import styles from "./ProductCard.module.css";
-import SharePopup from "../SharePopup/SharePopup";
 
-const ProductCard = ({ images = [], children, onClick }) => {
+const ProductCard = ({ 
+  images = [], 
+  children, 
+  onClick, 
+  modalIsVisible, 
+  setModalIsVisible
+}) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
-  const [modalIsVisible, setModalIsVisible] = useState(false);
   const [hovered, setHovered] = useState(false);
 
   // Function to open the share modal
   const openModal = () => {
     setModalIsVisible(true);
   };
 
-  // Function to close the share modal
-  const closeModal = () => {
-    setModalIsVisible(false);
-  };
-
   // Disable scrolling when the modal is visible
   useEffect(() => {
     if (modalIsVisible) {
@@ -100,14 +99,6 @@ const ProductCard = ({ images = [], children, onClick }) => {
           {children} {/* This will render the title, host, and price */}
         </div>
       </div>
-
-      {/* Render Overlay and SharePopup */}
-      {modalIsVisible && (
-        <>
-          <div className={styles.overlay} onClick={closeModal}></div>
-          <SharePopup onClick={closeModal} />
-        </>
-      )}
     </>
   );
 };

src/components/ProductCard/ProductCard.module.css

@@ -11,16 +11,6 @@
   margin: 20px;
 }
 
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
-  z-index: 1000;
-}
-
 .no-scroll {
   overflow: hidden !important; /* Prevent scrolling */
   height: 100%; /* Prevent content from extending out of the viewport */

src/pages/RootLayout/Root.jsx

@@ -3,22 +3,49 @@ import Footer from "../../components/Footer/Footer";
 import Header from "../../components/Header/Header";
 import colors from '../../theme/colors';
 import styles from "./Root.module.css"
+import { useEffect, useState } from "react";
+import SharePopup from "../../components/SharePopup/SharePopup";
+
 
 const Root = () =>
 {
+	const [modalIsVisible, setModalIsVisible] = useState(false);
+  const closeModal = () => setModalIsVisible(false);
+
+	useEffect(() => {
+    if (modalIsVisible) {
+      document.body.classList.add('modalOpen');
+    } else {
+      document.body.classList.remove('modalOpen');
+    }
+  }, [modalIsVisible]);
+
+  const modalContext = {
+    modalIsVisible,
+    setModalIsVisible,
+    closeModal
+  };
+
 	const themeStyles = {
 		"--primary": colors.primary,
 		"--palette-deco": colors.paletteDeco,
 		"--neutral": colors.neutral,
 	};
 
 	return (
-		<div style={themeStyles} className={styles.rootLayout}>
+		<div style={themeStyles} className={`${styles.rootLayout} ${modalIsVisible ? styles.modalOpen : ''}`}>
 			<Header/>
 			<div className={styles.layoutBody}>
-				<Outlet/>	{/* <Outlet/> render the child route elements. */}
+				<Outlet context={modalContext} />
 			</div>
 			<Footer/>
+
+			{modalIsVisible && (
+        <>
+          <div className={styles.overlay} onClick={closeModal}></div>
+          <SharePopup onClick={closeModal} />
+        </>
+      )}
 		</div>
 	)
 }

src/pages/RootLayout/Root.module.css

@@ -15,4 +15,22 @@
 
 .layoutBody {
 	flex-grow: 1;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+}
+
+.rootLayout.modalOpen,
+:global(body.modalOpen) {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
 }