fixed the height calculation to handle dynamic browser UI changes.

src/pages/product/components/ActionsButtons/ActionsButtons.module.css

@@ -16,7 +16,7 @@
   align-items: center;
   padding: 0 1px;
   border-radius: 888px;
-  width: 140px;
+  width: 110px;
   height: 48px;
 }
 

src/pages/product/components/ActionsButtons/ActionsButtons.tsx

@@ -58,10 +58,11 @@ export default function ActionsButtons({
               className={styles.quantityButton}
               {...(min && { disabled: quantity === min })}
               style={{
-                width: 48,
-                height: 48,
-                minWidth: 48,
+                width: 36,
+                height: 36,
+                minWidth: 36,
                 borderColor: "#DEDEE0",
+                backgroundColor: "var(--secondary-background)"
               }}
             />
           ) : (
@@ -85,10 +86,10 @@ export default function ActionsButtons({
                 className={styles.addButton}
                 style={{
                   background: "#FEF2F2",
-                  width: 48,
-                  height: 48,
+                  width: 36,
+                  height: 36,
                   border: "none",
-                  minWidth: 48,
+                  minWidth: 36,
                 }}
               />
             </Popconfirm>
@@ -112,10 +113,10 @@ export default function ActionsButtons({
             className={styles.quantityButton}
             {...(max && { disabled: quantity >= max })}
             style={{
-              width: 48,
-              height: 48,
+              width: 36,
+              height: 36,
               borderColor: "#DEDEE0",
-              minWidth: 48,
+              minWidth: 36,
             }}
           />
         </div>

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: "75vh",
+        height: viewportHeight > 0 
+          ? `${viewportHeight - 195}px` 
+          : "calc(100dvh - 195px)",
         overflow: "auto",
         scrollbarWidth: "none",
       }}