Merge pull request #7293 from Katotodan/feature/diplay-fix

fix: fixing the columns order on small devices

Author: saurabhraghuvanshii

src/sections/Pricing/review-slider.js

@@ -1,5 +1,5 @@
 
-import React from "react";
+import React, { useRef, useState, useLayoutEffect } from "react";
 import styled from "styled-components";
 import Customers from "../../reusecore/Blockquote/Blockquote-image";
 import Slider from "react-slick";
@@ -33,28 +33,22 @@ const settings = {
     {
       breakpoint: 1300,
       settings: {
-        slidesToShow: 2.5,
+        slidesToShow: 2,
+        slidesToScroll: 1,
       }
     },
     {
       breakpoint: 1024,
       settings: {
         slidesToShow: 2,
+        slidesToScroll: 1,
       }
     },
     {
       breakpoint: 800,
-      settings: {
-        slidesToShow: 1.5,
-        slidesToScroll: 0.5,
-      }
-    },
-    {
-      breakpoint: 600,
       settings: {
         slidesToShow: 1,
         slidesToScroll: 1,
-        autoplaySpeed: 2000,
       }
     }
   ]
@@ -81,15 +75,80 @@ max-width: 100%;
     opacity: 1;
   }
 
+  /* Prevent extreme shrinking on mobile */
+  .slick-slide > div { min-width: 0; }
+  .slider .type-one-wrapper { width: 100%; max-width: none; margin: 0 0.5rem; }
+
+  @media (max-width: 768px) {
+    .type-one-wrapper.type-one-wrapper-boxed { max-width: none; padding: 0; }
+    .type-one-quote .type-one-quote-base,
+    .type-two-quote .type-two-quote-base { padding-left: 30px; padding-right: 30px; }
+  }
+
 `;
 
 
 const Reviews = () => {
+  const [isClient, setIsClient] = useState(false);
+  const [slidesToShowState, setSlidesToShowState] = useState(null);
+  const sliderRef = useRef(null);
+
+  const mergedSettings = {
+    ...settings,
+    slidesToShow: slidesToShowState || 1,
+    slidesToScroll: 1,
+    responsive: []
+  };
+
+  const computeSlides = () => {
+    const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
+    if (w <= 800) return 1;
+    if (w <= 1024) return 2;
+    return 3;
+  };
+
+  useLayoutEffect(() => {
+
+    setIsClient(true);
+    setSlidesToShowState(computeSlides());
+
+    let resizeTimeout = null;
+    const onResizeDebounced = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const slides = computeSlides();
+        setSlidesToShowState((prev) => {
+          if (prev !== slides) return slides;
+          return prev;
+        });
+        if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
+          sliderRef.current.innerSlider.onWindowResized();
+        }
+      }, 100);
+    };
+
+    const onLoad = () => onResizeDebounced();
+
+    window.addEventListener("resize", onResizeDebounced);
+    window.addEventListener("load", onLoad);
+    const imgs = document.querySelectorAll(".slider img");
+    imgs.forEach((img) => img.addEventListener("load", onLoad));
+
+    return () => {
+      window.removeEventListener("resize", onResizeDebounced);
+      window.removeEventListener("load", onLoad);
+      imgs.forEach((img) => img.removeEventListener("load", onLoad));
+      clearTimeout(resizeTimeout);
+    };
+  }, []);
+
+  if (!isClient || slidesToShowState === null) return null;
+
   return (
     <ReviewsWrapper>
       <div className="slider">
         <h2>Hear what other users have to say...</h2>
-        <Slider {...settings}>
+        <Slider key={`review-slider-${slidesToShowState}`} ref={sliderRef} {...mergedSettings}>
           {/* <Customers
             type="1"
             quote="The Meshery Extension transforms Docker Desktop into a powerful load generation utility, conveniently enabling me to deploy and configure any service mesh with a click of the button and invoke and control load-based performance tests from my desktop."