some responsive fixes for Product details page

Author: Moamal-2000

src/Components/ProductDetailsPage/ProductDetails/ProductDealingControls.jsx

@@ -43,14 +43,24 @@ const ProductDealingControls = () => {
         </button>
       </div>
 
-      <button type="button" className={s.buyButton} onClick={handleBuyProduct}>
-        Buy Now
-      </button>
-
-      <button type="button" className={s.addToFav} aria-label="Add to favorite">
-        <SvgIcon name="heart" />
-        <ToolTip left="50%" top="60px" content="Add to favorite" />
-      </button>
+      <div className={s.wrapper}>
+        <button
+          type="button"
+          className={s.buyButton}
+          onClick={handleBuyProduct}
+        >
+          Buy Now
+        </button>
+
+        <button
+          type="button"
+          className={s.addToFav}
+          aria-label="Add to favorite"
+        >
+          <SvgIcon name="heart" />
+          <ToolTip left="50%" top="60px" content="Add to favorite" />
+        </button>
+      </div>
     </section>
   );
 };

src/Components/ProductDetailsPage/ProductDetails/ProductDealingControls.module.scss

@@ -6,6 +6,12 @@
   margin: 18px 0 54px;
 }
 
+@media (max-width: 480px) {
+  .dealing {
+    flex-direction: column;
+  }
+}
+
 .customNumberInput {
   display: flex;
   align-items: center;
@@ -68,6 +74,12 @@
   }
 }
 
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
 .buyButton {
   outline: none;
   border: none;

src/Components/ProductDetailsPage/ProductDetails/ProductDetails.jsx

@@ -1,12 +1,12 @@
 import { useRef } from "react";
 import { useSelector } from "react-redux";
 import ProductPreview from "../ProductPreviw/ProductPreview";
+import ProductColorsSection from "./ProductColorsSection";
 import ProductDealingControls from "./ProductDealingControls";
 import s from "./ProductDetails.module.scss";
 import ProductFeatures from "./ProductFeatures";
 import ProductFirstInfos from "./ProductFirstInfos";
 import ProductSizes from "./ProductSizes";
-import ProductColorsSection from "./ProductColorsSection";
 
 const ProductDetails = ({ data }) => {
   const { previewImg, isZoomInPreviewActive } = useSelector(

src/Components/ProductDetailsPage/ProductDetails/ProductDetails.module.scss

@@ -9,6 +9,7 @@
 
 @include large {
   .detailsSection {
+    height: auto;
     flex-direction: column;
     align-items: center;
   }
@@ -89,5 +90,6 @@
 @include large {
   .horizontalLine {
     max-width: 100%;
+    min-width: auto;
   }
-}
+}

src/Components/ProductDetailsPage/ProductDetails/ProductFirstInfos.module.scss

@@ -13,6 +13,12 @@
   margin: 10px 0;
 }
 
+@include very-small {
+  .rateAndReviews {
+    flex-direction: column;
+  }
+}
+
 /* [Stars] */
 .rateAndReviews>* {
   gap: 6px;
@@ -28,6 +34,12 @@
   border-right: solid 2px var(--dark-gray);
 }
 
+@include very-small {
+  .verticalLine {
+    display: none;
+  }
+}
+
 .greenText {
   font-size: .875rem;
   color: var(--green);