feat: swiper

src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css

@@ -1,11 +1,11 @@
 
 .create-button {
-    padding: 10px 10px 11px 10px;
+    padding: 8px 10px 9px;
     border-bottom: 2px solid gray;
 }
 
 .spacer {
-    height: 46px;
+    height: 43px;
     border-bottom: 2px solid gray;
     width: 100%;
 }

src/app/deals/components/shared/Funnel/Funnel.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import React, { FC, ReactNode } from "react";
-import { Group, ScrollArea } from "@mantine/core";
-import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
 import DealContainer from "@/app/deals/components/shared/DealContainer/DealContainer";
 import StatusColumnWrapper from "@/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper";
@@ -26,15 +24,17 @@ const Funnel: FC = () => {
         handleDragEnd,
         activeStatus,
         activeDeal,
+        swiperRef,
     } = useDealsAndStatusesDnd();
 
-    const renderFunnelDnd = () => (
+    return (
         <FunnelDnd
             containers={sortedStatuses}
             items={deals}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragEnd={handleDragEnd}
+            swiperRef={swiperRef}
             getContainerId={(status: StatusSchema) => `${status.id}-status`}
             getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
                 sortByLexorank(
@@ -71,22 +71,6 @@ const Funnel: FC = () => {
             isCreatingContainerEnabled={!!selectedBoard}
         />
     );
-
-    if (isMobile) return renderFunnelDnd();
-
-    return (
-        <ScrollArea
-            offsetScrollbars={"x"}
-            scrollbarSize={"0.5rem"}>
-            <Group
-                align={"start"}
-                wrap={"nowrap"}
-                gap={"xs"}>
-                {renderFunnelDnd()}
-                {selectedBoard && <CreateStatusButton />}
-            </Group>
-        </ScrollArea>
-    );
 };
 
 export default Funnel;

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -1,8 +1,5 @@
 
 .container {
-    min-width: 150px;
-    width: 15vw;
-
     @media (max-width: 48em) {
         width: 80vw;
     }