feat: styles for deal drawer

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css

@@ -1,6 +1,8 @@
 
 .tab {
-    border-bottom-width: 3px;
+    @media (max-width: 48em) {
+        border-bottom-width: 3px;
+    }
 }
 
 .header-board {

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx

@@ -25,7 +25,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
 
     return (
         <Drawer
-            size={isMobile ? "100%" : "60%"}
+            size={isMobile ? "100%" : "80%"}
             position={"right"}
             onClose={onClose}
             removeScrollProps={{ allowPinchZoom: true }}
@@ -37,7 +37,8 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
                 body: {
                     display: "flex",
                     flexDirection: "column",
-                    padding: 0,
+                    padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
+                    height: "100vh",
                 },
                 header: {
                     paddingBlock: 0,

src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx

@@ -3,6 +3,7 @@ import { IconEdit } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { Box, Tabs } from "@mantine/core";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema, ProjectSchema } from "@/lib/client";
 import { MODULES } from "@/modules/modules";
 import styles from "../DealEditorDrawer.module.css";
@@ -15,6 +16,8 @@ type Props = {
 };
 
 const DealEditorBody: FC<Props> = props => {
+    const isMobile = useIsMobile();
+
     const getTabPanel = (value: string, component: ReactNode): ReactNode => (
         <Tabs.Panel
             key={value}
@@ -53,6 +56,8 @@ const DealEditorBody: FC<Props> = props => {
     return (
         <Tabs
             defaultValue="general"
+            orientation={isMobile ? "horizontal" : "vertical"}
+            h={"100%"}
             classNames={{ tab: styles.tab }}>
             <Tabs.List>
                 <Tabs.Tab

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Stack, Text, TextInput } from "@mantine/core";
+import { Flex, Stack, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/components/Footer";
 import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
@@ -40,27 +40,43 @@ const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
     return (
         <form onSubmit={form.onSubmit(onSubmit)}>
             <Stack p={"md"}>
-                <TextInput
-                    label={"Название"}
-                    {...form.getInputProps("name")}
-                />
-                <Text>
-                    Создано: {utcDateTimeToLocalString(value.createdAt)}
-                </Text>
-                <BoardSelect
-                    label={"Доска"}
-                    {...form.getInputProps("board")}
-                    onChange={board => {
-                        form.setFieldValue("board", board ?? undefined);
-                        form.setFieldValue("status", undefined);
-                    }}
-                    projectId={value.board.projectId}
-                />
-                <StatusSelect
-                    label={"Статус"}
-                    {...form.getInputProps("status")}
-                    boardId={form.values.board?.id}
-                />
+                <Flex
+                    gap={"md"}
+                    w={"100%"}
+                    direction={{ base: "column", sm: "row" }}>
+                    <TextInput
+                        label={"Название"}
+                        {...form.getInputProps("name")}
+                        flex={1}
+                    />
+                    <TextInput
+                        label={"Дата создания"}
+                        value={utcDateTimeToLocalString(value.createdAt)}
+                        readOnly
+                        flex={1}
+                    />
+                </Flex>
+                <Flex
+                    gap={"md"}
+                    w={"100%"}
+                    direction={{ base: "column", sm: "row" }}>
+                    <BoardSelect
+                        label={"Доска"}
+                        {...form.getInputProps("board")}
+                        onChange={board => {
+                            form.setFieldValue("board", board ?? undefined);
+                            form.setFieldValue("status", undefined);
+                        }}
+                        projectId={value.board.projectId}
+                        flex={1}
+                    />
+                    <StatusSelect
+                        label={"Статус"}
+                        {...form.getInputProps("status")}
+                        boardId={form.values.board?.id}
+                        flex={1}
+                    />
+                </Flex>
                 <Footer
                     form={form}
                     onDelete={() => onDelete(value)}