From 3ccebeb12310998e272ed35b50039f813ec16735 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Sun, 17 Aug 2025 19:35:21 +0400
Subject: [PATCH] fix: centered columns in funnel dnd for mobile

---
 .../CreateStatusButton.module.css                 | 15 +++++++++------
 .../CreateStatusButton/CreateStatusButton.tsx     |  4 ++--
 src/components/dnd/FunnelDnd/FunnelDnd.tsx        |  3 ++-
 src/components/dnd/SortableItem/DragHandle.tsx    |  1 +
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css
index cb8aa40..566eef3 100644
--- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css
+++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css
@@ -1,8 +1,16 @@
 
 .container {
+    cursor: pointer;
+    height: calc(100vh - 150px);
+
+    @media (max-width: 48em) {
+        width: 80vw;
+    }
+}
+
+.inner-container {
     border-radius: var(--mantine-spacing-md);
     flex-wrap: nowrap;
-    cursor: pointer;
 
     @mixin light {
         background-color: var(--color-light-aqua);
@@ -10,9 +18,4 @@
     @mixin dark {
         background-color: var(--mantine-color-dark-6);
     }
-
-    width: fit-content;
-    @media (max-width: 48em) {
-        width: 80vw;
-    }
 }
diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx
index af70eb5..37f1b3a 100644
--- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx
+++ b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx
@@ -11,8 +11,8 @@ const CreateStatusButton = () => {
     const isMobile = useIsMobile();
 
     return (
-        <Stack>
-            <Box className={styles.container}>
+        <Stack className={styles.container}>
+            <Box className={styles["inner-container"]}>
                 <InPlaceInput
                     placeholder={"Название колонки"}
                     onComplete={onCreateStatus}
diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx
index fd53d05..ed53b6f 100644
--- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx
+++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx
@@ -109,7 +109,8 @@ const FunnelDnd = <
                 <Swiper
                     ref={swiperRef}
                     className={classes["swiper-container"]}
-                    slidesPerView={1.2}
+                    slidesPerView={1.1}
+                    style={{ paddingLeft: "10vw", paddingRight: "2vw" }}
                     modules={[Pagination]}
                     freeMode={{ enabled: false }}
                     pagination={{ enabled: true, clickable: true }}>
diff --git a/src/components/dnd/SortableItem/DragHandle.tsx b/src/components/dnd/SortableItem/DragHandle.tsx
index 05f9bd7..79c8aad 100644
--- a/src/components/dnd/SortableItem/DragHandle.tsx
+++ b/src/components/dnd/SortableItem/DragHandle.tsx
@@ -21,6 +21,7 @@ const DragHandle = ({ id, children, style, disabled }: Props) => {
             style={{
                 width: "100wv",
                 cursor: disabled ? "default" : "grab",
+                touchAction: "auto",
                 ...style,
             }}
             className={disabled ? "" : "swiper-no-swiping"}