fixed the height calculation to handle dynamic browser UI changes.

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",
       }}