From 96573d62f41688fd3082a112d3ccc6bb9a4b2ab2 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sat, 20 Dec 2025 20:58:12 +0300
Subject: [PATCH] product: enhance the height

---
 .../ActionsButtons/ActionsButtons.module.css  |  2 +-
 .../ActionsButtons/ActionsButtons.tsx         | 19 ++++++++++---------
 src/pages/product/page.tsx                    |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/pages/product/components/ActionsButtons/ActionsButtons.module.css b/src/pages/product/components/ActionsButtons/ActionsButtons.module.css
index e50e351..ffb71c3 100644
--- a/src/pages/product/components/ActionsButtons/ActionsButtons.module.css
+++ b/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;
 }
 
diff --git a/src/pages/product/components/ActionsButtons/ActionsButtons.tsx b/src/pages/product/components/ActionsButtons/ActionsButtons.tsx
index 0c753da..e9fc4b8 100644
--- a/src/pages/product/components/ActionsButtons/ActionsButtons.tsx
+++ b/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>
diff --git a/src/pages/product/page.tsx b/src/pages/product/page.tsx
index 319269e..572f952 100644
--- a/src/pages/product/page.tsx
+++ b/src/pages/product/page.tsx
@@ -176,7 +176,7 @@ export default function ProductDetailPage({
   return (
     <div
       style={{
-        height: "75vh",
+        height: "calc(100vh - 195px)",
         overflow: "auto",
         scrollbarWidth: "none",
       }}