fix: mantine carousel

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

@@ -0,0 +1,12 @@
+
+.container {
+    flex-wrap: nowrap;
+    border-bottom: solid blue 3px;
+    margin-bottom: 3px;
+    cursor: pointer;
+
+    @media (max-width: 48em) {
+        width: 80vw;
+        margin-right: 8vw;
+    }
+}

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

@@ -1,37 +1,37 @@
 import React from "react";
 import { IconPlus } from "@tabler/icons-react";
-import { Box } from "@mantine/core";
+import { Box, Center, Stack } from "@mantine/core";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import styles from "./CreateStatusButton.module.css";
 
 const CreateStatusButton = () => {
     const { onCreateStatus } = useStatusesContext();
 
     return (
-        <Box
-            ml={6}
-            className={"flex-nowrap border-b-3 border-blue-500 mb-3"}
-            style={{
-                cursor: "pointer",
-            }}>
-            <InPlaceInput
-                placeholder={"Название колонки"}
-                onComplete={onCreateStatus}
-                getChildren={startEditing => (
-                    <Box
-                        p={15}
-                        onClick={() => startEditing()}>
-                        <IconPlus size={20} />
-                    </Box>
-                )}
-                modalTitle={"Создание колонки"}
-                inputStyles={{
-                    wrapper: {
-                        padding: 4,
-                    },
-                }}
-            />
-        </Box>
+        <Stack>
+            <Box
+                ml={6}
+                className={styles.container}>
+                <InPlaceInput
+                    placeholder={"Название колонки"}
+                    onComplete={onCreateStatus}
+                    getChildren={startEditing => (
+                        <Center
+                            p={15}
+                            onClick={() => startEditing()}>
+                            <IconPlus size={20} />
+                        </Center>
+                    )}
+                    modalTitle={"Создание колонки"}
+                    inputStyles={{
+                        wrapper: {
+                            padding: 4,
+                        },
+                    }}
+                />
+            </Box>
+        </Stack>
     );
 };
 

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

@@ -4,6 +4,6 @@
     width: 15vw;
 
     @media (max-width: 48em) {
-        width: 90vw;
+        width: 80vw;
     }
 }

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
+import "@mantine/carousel/styles.css";
 import { ReactNode } from "react";
 import {
     ColorSchemeScript,

src/components/dnd/FunnelDnd/FunnelDnd.module.css

@@ -12,3 +12,22 @@
         }
     }
 }
+
+.indicator {
+    height: 4px;
+    @mixin light {
+        background-color: lightgray;
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+
+    &[data-active] {
+        @mixin light {
+            background-color: gray;
+        }
+        @mixin dark {
+            background-color: var(--mantine-color-dark-5);
+        }
+    }
+}

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -12,7 +12,8 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { Group, ScrollArea } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Group } from "@mantine/core";
 import CreateStatusButton from "@/app/deals/components/shared/CreateStatusButton/CreateStatusButton";
 import useDndSensors from "@/app/deals/hooks/useSensors";
 import FunnelColumn from "@/components/dnd/FunnelDnd/FunnelColumn";
@@ -20,6 +21,7 @@ import FunnelOverlay from "@/components/dnd/FunnelDnd/FunnelOverlay";
 import { BaseDraggable } from "@/components/dnd/types/types";
 import useIsMobile from "@/hooks/useIsMobile";
 import SortableItem from "../SortableItem";
+import styles from "./FunnelDnd.module.css";
 
 type Props<TContainer, TItem> = {
     containers: TContainer[];
@@ -89,18 +91,16 @@ const FunnelDnd = <
     const renderBody = () => (
         <>
             {isMobile ? (
-                <ScrollArea type={"never"}>
-                    <Group
-                        style={{
-                            gap: 0,
-                            display: "flex",
-                            flexWrap: "nowrap",
-                            alignItems: "start",
-                        }}>
-                        {renderContainers()}
-                        <CreateStatusButton />
-                    </Group>
-                </ScrollArea>
+                <Carousel
+                    slideSize={"80%"}
+                    slideGap={"md"}
+                    pb={"xl"}
+                    withControls={false}
+                    withIndicators
+                    classNames={styles}>
+                    {renderContainers()}
+                    <CreateStatusButton />
+                </Carousel>
             ) : (
                 renderContainers()
             )}