product: enhance the height

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

@@ -176,7 +176,7 @@ export default function ProductDetailPage({
   return (
     <div
       style={{
-        height: "75vh",
+        height: "calc(100vh - 195px)",
         overflow: "auto",
         scrollbarWidth: "none",
       }}