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,