Updated css , position sticky , overflow-x to scroll for body and visisble for main container, tuned header postion w.r.t nav bar , updated media queries for table width and position

Signed-off-by: priyanshu4999 <[email protected]>

Author: priyanshu4999

src/sections/Pricing/comparison.js

@@ -4,13 +4,10 @@ import details from "./generateDetails";
 import { Container } from "../../reusecore/Layout";
 // import FeatureDetails from "./collapsible-details";
 import FeatureDetails from "../../components/Pricing/PlanCard/collapsible-details";
+import { useRef } from "react";
 
 const ComparisonWrapper = styled.div`
   margin: 6rem auto;
-  @media (min-width: 2048px) {
-    margin: 15rem auto;
-  }
-
   h2,
   h5 {
     text-align: center;
@@ -20,10 +17,9 @@ const ComparisonWrapper = styled.div`
     box-shadow: 0 0 24px ${(props) => props.theme.whiteOneFiveToBlackOneFive};
     margin: 2rem auto;
     display: block;
-    overflow-x: scroll;
-    overflow-y: hidden;
     transition: 0.6s cubic-bezier(0.5, 1);
   }
+
   .price-table {
     width: 100%;
     border-collapse: collapse;
@@ -61,6 +57,18 @@ const ComparisonWrapper = styled.div`
   }
   .price-table tr:nth-child(even) {
   }
+  .price-table-header-sticky {
+    overflow-x: scroll;
+    position: sticky;
+    top: 0%;
+    scrollbar-width: thin;
+    scrollbar-color: ${(props) => props.theme.whiteZeroThreeToBlackZeroThree}
+      ${(props) => props.theme.whiteZeroThreeToBlackZeroThree};
+  }
+  .price-table-body-scroll {
+    overflow-x: scroll;
+    scrollbar-width: none;
+  }
 
   .price-table tr:hover {
     background-color: ${(props) => props.theme.secondaryLightColor};
@@ -81,7 +89,6 @@ const ComparisonWrapper = styled.div`
   .price-table col:nth-child(5) {
     width: 9rem;
   }
-
   /* Highlighted column */
 
   .price-table tr td:nth-child(3) {
@@ -120,7 +127,7 @@ const ComparisonWrapper = styled.div`
     background-color: rgba(0, 179, 159, 0.1);
     text-transform: uppercase;
     font-size: 12px;
-    padding: 12px 48px;
+    padding: 12px 32px;
     font-weight: 700;
   }
   .price-table .price-blank {
@@ -200,17 +207,35 @@ const ComparisonWrapper = styled.div`
   .feature-link:hover {
     text-decoration: underline;
   }
+  @media (min-width: 1100px) {
+    .price-table-header-sticky {
+      top: 2%;
+
+      @media (min-width: 2048px) {
+        margin: 15rem auto;
+      }
+    }
+  }
 `;
 
 const Comparison = () => {
+  const headerScrollRef = useRef(null);
+  const bodyScrollRef = useRef(null);
+  const handleCommonScroll = () => {
+    bodyScrollRef.current.scrollLeft = headerScrollRef.current.scrollLeft;
+  };
   return (
     <ComparisonWrapper>
       <h2>Compare All Features</h2>
       <h5 id={"feature-comparison"}>Choose a plan that’s right for you</h5>
       <Container>
         <div className="main">
-          <div className="price-table-header-sticky">
-            <table>
+          <div
+            className="price-table-header-sticky"
+            ref={headerScrollRef}
+            onScroll={handleCommonScroll}
+          >
+            <table className="price-table">
               <colgroup>
                 <col />
                 <col />
@@ -236,7 +261,7 @@ const Comparison = () => {
               </tbody>
             </table>
           </div>
-          <div className="price-table-body-scroll">
+          <div className="price-table-body-scroll" ref={bodyScrollRef}>
             <table className="price-table">
               <colgroup>
                 <col />