fix: roboto font, column scrolling fixed, column input width

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

@@ -6,6 +6,7 @@
     width: fit-content;
     @media (max-width: 48em) {
         width: 80vw;
+        height: 73.5vh;
     }
 }
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { IconPlus } from "@tabler/icons-react";
-import { Box, Center, Group, Stack, Text } from "@mantine/core";
+import { Box, Center, Group, Text } from "@mantine/core";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import useIsMobile from "@/hooks/utils/useIsMobile";
@@ -11,7 +11,7 @@ const CreateStatusButton = () => {
     const isMobile = useIsMobile();
 
     return (
-        <Stack className={styles.container}>
+        <Box className={styles.container}>
             <Box className={styles["inner-container"]}>
                 <InPlaceInput
                     placeholder={"Название колонки"}
@@ -32,13 +32,17 @@ const CreateStatusButton = () => {
                     modalTitle={"Создание колонки"}
                     inputStyles={{
                         wrapper: {
+                            width: 250,
                             paddingInline: "var(--mantine-spacing-md)",
                             paddingBlock: "var(--mantine-spacing-xs)",
                         },
+                        input: {
+                            width: 250,
+                        },
                     }}
                 />
             </Box>
-        </Stack>
+        </Box>
     );
 };
 

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

@@ -3,7 +3,7 @@
     height: calc(100vh - 150px);
     @media (max-width: 48em) {
         width: 80vw;
-        height: calc(100vh - 200px);
+        height: calc(100vh - 215px);
     }
 }
 
@@ -12,7 +12,7 @@
     gap: 0;
 
     @media (max-width: 48em) {
-        max-height: calc(100vh - 200px);
+        max-height: calc(100vh - 215px);
     }
 
     @mixin light {

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

@@ -30,7 +30,7 @@ const StatusColumnWrapper = ({
                     scrollbars={"y"}>
                     <Stack
                         gap={"xs"}
-                        mah={"calc(100vh - 220px)"}>
+                        mah={"calc(100vh - 285px)"}>
                         {createFormEnabled && <CreateCardButton />}
                         {children}
                     </Stack>

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -11,8 +11,9 @@ import {
     horizontalListSortingStrategy,
     SortableContext,
 } from "@dnd-kit/sortable";
-import { FreeMode, Mousewheel, Pagination, Scrollbar } from "swiper/modules";
+import { FreeMode, Pagination, Scrollbar } from "swiper/modules";
 import { Swiper, SwiperRef, SwiperSlide } from "swiper/react";
+import { Box } 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";
@@ -108,42 +109,40 @@ const FunnelDnd = <
     const renderBody = () => {
         if (isMobile) {
             return (
-                <Swiper
+                <Box>
-                    ref={swiperRef}
+                    <Swiper
-                    onTouchStart={swiper => {
+                        ref={swiperRef}
-                        swiper.allowTouchMove = !activeItem;
+                        onTouchStart={swiper => {
-                    }}
+                            swiper.allowTouchMove = !activeItem;
-                    onTouchMove={swiper => {
+                        }}
-                        swiper.allowTouchMove = !activeItem;
+                        onTouchMove={swiper => {
-                    }}
+                            swiper.allowTouchMove = !activeItem;
-                    className={classes["swiper-container"]}
+                        }}
-                    slidesPerView={1.1}
+                        className={classes["swiper-container"]}
-                    style={{ paddingLeft: "10vw", paddingRight: "2vw" }}
+                        slidesPerView={1.1}
-                    modules={[Pagination]}
+                        spaceBetween={10}
-                    freeMode={{ enabled: false }}
+                        style={{ paddingLeft: "10vw" }}
-                    pagination={{ enabled: true, clickable: true }}>
+                        modules={[Pagination]}
-                    {renderContainers()}
+                        freeMode={{ enabled: false }}
-                    {isCreatingContainerEnabled && (
+                        pagination={{ enabled: true, clickable: true }}>
-                        <SwiperSlide>
+                        {renderContainers()}
-                            <CreateStatusButton />
+                        {isCreatingContainerEnabled && (
-                        </SwiperSlide>
+                            <SwiperSlide style={{ width: 250 }}>
-                    )}
+                                <CreateStatusButton />
-                </Swiper>
+                            </SwiperSlide>
+                        )}
+                    </Swiper>
+                </Box>
             );
         }
         return (
             <Swiper
                 ref={swiperRef}
                 className={classes["swiper-container"]}
-                modules={[Scrollbar, Mousewheel, FreeMode]}
+                modules={[Scrollbar, FreeMode]}
                 spaceBetween={15}
                 slidesPerView={"auto"}
                 scrollbar={{ hide: false }}
-                mousewheel={{
-                    enabled: true,
-                    sensitivity: 0.2,
-                    releaseOnEdges: true,
-                }}
                 freeMode={{ enabled: true }}
                 grabCursor>
                 {renderContainers()}

src/theme.ts

@@ -1,3 +1,4 @@
+import { Roboto } from "next/font/google";
 import { createTheme, MantineColorsTuple } from "@mantine/core";
 
 export const myColor: MantineColorsTuple = [
@@ -14,9 +15,17 @@ export const myColor: MantineColorsTuple = [
 ];
 
 const radius = "md";
-// const size = "md";
+
+const font = Roboto({
+    subsets: ["latin"],
+    weight: ["400"],
+});
 
 export const theme = createTheme({
+    fontFamily: `${font.style.fontFamily}, sans-serif`,
+    headings: {
+        fontFamily: `${font.style.fontFamily}, sans-serif`,
+    },
     colors: {
         myColor,
     },