From b149fabfc9ce9d981202d500384034655bd9a435 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sat, 20 Dec 2025 21:20:18 +0300
Subject: [PATCH] fixed the height calculation to handle dynamic browser UI
 changes.

---
 src/pages/product/page.tsx | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/pages/product/page.tsx b/src/pages/product/page.tsx
index 572f952..881c41f 100644
--- a/src/pages/product/page.tsx
+++ b/src/pages/product/page.tsx
@@ -8,7 +8,7 @@ import { Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
 import useBreakPoint from "hooks/useBreakPoint";
 import ExtraGroupsContainer from "pages/product/components/ExtraGroupsContainer.tsx";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useGetMenuQuery } from "redux/api/others.ts";
 import { colors } from "ThemeConstants";
@@ -30,6 +30,35 @@ export default function ProductDetailPage({
   const { restaurant } = useAppSelector((state) => state.order);
   const { isDesktop, isTablet } = useBreakPoint();
   const [quantity, setQuantity] = useState(1);
+  const [viewportHeight, setViewportHeight] = useState<number>(
+    typeof window !== "undefined" ? window.innerHeight : 0,
+  );
+
+  // Update viewport height when browser UI changes (mobile address bar, etc.)
+  useEffect(() => {
+    const updateViewportHeight = () => {
+      setViewportHeight(window.innerHeight);
+    };
+
+    // Set initial height
+    updateViewportHeight();
+
+    // Update on resize and orientation change
+    window.addEventListener("resize", updateViewportHeight);
+    window.addEventListener("orientationchange", updateViewportHeight);
+    // Also listen to visual viewport changes for mobile browsers
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", updateViewportHeight);
+    }
+
+    return () => {
+      window.removeEventListener("resize", updateViewportHeight);
+      window.removeEventListener("orientationchange", updateViewportHeight);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", updateViewportHeight);
+      }
+    };
+  }, []);
 
   // Get menu data
   const { data: menuData } = useGetMenuQuery(restaurant?.restautantId, {
@@ -176,7 +205,9 @@ export default function ProductDetailPage({
   return (
     <div
       style={{
-        height: "calc(100vh - 195px)",
+        height: viewportHeight > 0 
+          ? `${viewportHeight - 195}px` 
+          : "calc(100dvh - 195px)",
         overflow: "auto",
         scrollbarWidth: "none",
       }}