Add horizontal scroll for new-companies block at 1200px-1511px screen…

… width
ita-social-projects · Dec 2, 2024 · 8fd95b3 · 8fd95b3
1 parent 1de9071
commit 8fd95b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
@@ -41,11 +41,11 @@ const MainCompanies = ({ isAuthorized }) => {
     }
   }, [newMembers, companylist, searchResults]);
 
-  const companyDataList = windowWidth >= 1200 && windowWidth < 1512
-    ? searchResults.slice(0, 3)
-    : searchResults;
+  const companyDataList = searchResults;
 
   const linkText = windowWidth >= 768 ? 'Всі підприємства' : 'Всі';
+  const antdGutter = windowWidth >= 1200 ? [0, 24] : [0, 24];
+  const antdWrap = windowWidth < 1200;
 
   return (
     <div className={styles['new-companies-main']}>
@@ -63,7 +63,7 @@ const MainCompanies = ({ isAuthorized }) => {
         </div>
       </div>
       <div className={styles['new-companies-block']}>
-        <Row justify={'start'} gutter={[0, 24]}>
+        <Row justify={'start'} gutter={antdGutter} wrap={antdWrap}>
           {companyDataList.map((result, resultIndex) => (
             <Col key={resultIndex} xs={24} md={12} xl={8} xxl={6}>
               <CompanyCard

diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css b/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
@@ -45,6 +45,7 @@
 .new-companies-block {
   width: 375px;
   padding: 18px 0px 38px 0px;
+  overflow: hidden;
 }
 
 
@@ -75,6 +76,8 @@
   .new-companies-block {
     width: 1140px;
     height: 365px;
+    overflow-x: scroll;
+    scrollbar-width: thin;
   }
 
   .new-companies-main__title {
@@ -97,6 +100,7 @@
   .new-companies-block {
     width: 1304px;
     height: 365px;
+    overflow: visible;
   }
 
   .new-companies-main__title {