cart: styles enhancements on different screen sizes

src/pages/product/page.tsx

@@ -29,7 +29,7 @@ export default function ProductDetailPage({
 
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
-  const { isDesktop } = useBreakPoint();
+  const { isDesktop, isTablet } = useBreakPoint();
   const [quantity, setQuantity] = useState(1);
 
   // Get menu data
@@ -205,7 +205,7 @@ export default function ProductDetailPage({
                 key={`product-${product?.id}-${product?.image}`}
                 src={product?.image}
                 fallbackSrc={default_image}
-                height={isDesktop ? 300 : 240}
+                height={isDesktop || isTablet ? 300 : 240}
                 width={"100%"}
                 style={{
                   width: "100%",

src/pages/product/product.module.css

@@ -219,8 +219,8 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 24px;
+  gap: 0px;
+  margin: 16px 0 24px 0;
 }
 
 .productDetails {
@@ -295,6 +295,16 @@
   }
 }
 
+@media (min-width: 769px) and (max-width: 1024px) {
+  .productHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+    margin: 24px 0;
+  }
+}
+
 .backButtonContainer {
   position: absolute;
   z-index: 999;