fix: styles for deal drawer fixed

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

@@ -38,7 +38,6 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
                     display: "flex",
                     flexDirection: "column",
                     padding: isMobile ? 0 : "var(--mantine-spacing-xs)",
-                    height: "100vh",
                 },
                 header: {
                     paddingBlock: 0,

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

@@ -62,7 +62,8 @@ const DealEditorBody: FC<Props> = props => {
         <Tabs
             defaultValue="general"
             orientation={isMobile ? "horizontal" : "vertical"}
-            h={"100%"}
+            h={"97vh"}
+            mih={"97vh"}
             classNames={{ tab: styles.tab }}>
             <Tabs.List>
                 <Tabs.Tab

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/FulfillmentBaseTab.module.css

@@ -1,38 +1,12 @@
 .container {
+    padding: var(--mantine-spacing-sm);
+    border: dashed 1px var(--mantine-color-default-border);
+    border-radius: var(--mantine-radius-lg);
+}
+
+.image-container {
     display: flex;
-    //flex-direction: column;
+    max-height: rem(250);
-    gap: rem(10);
+    max-width: rem(250);
-    max-height: 95vh;
+    height: 100%;
-}
-
-.container-disabled {
-}
-
-.products-list {
-    width: 52%;
-    display: flex;
-    flex-direction: column;
-    gap: rem(10);
-    flex: 2;
-}
-
-.card-container {
-    display: flex;
-    flex-direction: column;
-    gap: rem(10);
-    flex: 1;
-}
-
-.card-container-wrapper {
-    border: dashed var(--item-border-size) var(--mantine-color-default-border);
-    border-radius: var(--item-border-radius);
-    padding: rem(10);
-}
-
-.card-container-buttons {
-    gap: rem(10);
-    display: flex;
-    flex-direction: column;
-    margin-top: auto;
-    width: 100%;
 }

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/DealServicesTable.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Flex, rem } from "@mantine/core";
+import { Flex, ScrollArea } from "@mantine/core";
 import DealServiceRow from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow";
 import DealServicesTitle from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTitle";
 import DealServicesTotalLabel from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTotalLabel";
@@ -14,15 +14,15 @@ const DealServicesTable: FC = () => {
     return (
         <Flex
             direction={"column"}
-            gap={rem(10)}
+            gap={"sm"}
-            h={"100%"}>
+            mah={"90vh"}>
-            <Flex
+            <DealServicesTitle />
-                h={"100%"}
+            <ScrollArea
-                direction={"column"}>
+                scrollbars={"y"}
-                <DealServicesTitle />
+                offsetScrollbars={"y"}>
                 <Flex
                     direction={"column"}
-                    gap={rem(10)}>
+                    gap={"sm"}>
                     {dealServicesList.dealServices.map(dealService => (
                         <DealServiceRow
                             key={dealService.service.id}
@@ -32,7 +32,7 @@ const DealServicesTable: FC = () => {
                         />
                     ))}
                 </Flex>
-            </Flex>
+            </ScrollArea>
             <DealServicesTotalLabel />
             <ServicesActions />
         </Flex>

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTitle.tsx

@@ -1,10 +1,9 @@
-import { rem, Title } from "@mantine/core";
+import { Title } from "@mantine/core";
 
 const DealServicesTitle = () => (
     <Title
         order={3}
-        w={"100%"}
+        w={"100%"}>
-        mb={rem(10)}>
         Общие услуги
     </Title>
 );

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTotalLabel.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { rem, Title } from "@mantine/core";
+import { Title } from "@mantine/core";
 import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
 
 const DealServicesTotalLabel = () => {
@@ -16,9 +16,9 @@ const DealServicesTotalLabel = () => {
     return (
         <Title
             style={{ textAlign: "end" }}
-            mt={rem(10)}
+            mt={"sm"}
             order={3}>
-            Итог: {total}₽
+            Итог: {total.toFixed(2)}₽
         </Title>
     );
 };

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/ServicesActions.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, rem } from "@mantine/core";
+import { Button, Flex } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { addKitToDeal, ServicesKitSchema } from "@/lib/client";
 import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
@@ -48,8 +48,7 @@ const ServicesActions = () => {
 
     return (
         <Flex
-            direction={"column"}
+            gap={"sm"}
-            gap={rem(10)}
             mt={"auto"}>
             <Button
                 onClick={onCreateClick}

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx

@@ -3,18 +3,19 @@ import DealServicesTable from "@/modules/dealModules/dealEditorTabs/FulfillmentB
 import ProductsActions from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductsActions/ProductsActions";
 import ProductView from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView";
 import { useFulfillmentBaseContext } from "../../contexts/FulfillmentBaseContext";
+import styles from "../../FulfillmentBaseTab.module.css";
 
 const FulfillmentBaseTabBody = () => {
     const { dealProductsList } = useFulfillmentBaseContext();
 
     return (
         <Flex
-            p={"md"}
+            mah={"96vh"}
+            mx={"md"}
             gap={"xs"}>
             <ScrollArea
                 offsetScrollbars={"y"}
-                flex={4}
+                flex={4}>
-                mah={"91vh"}>
                 <Stack>
                     {dealProductsList.dealProducts.map((dealProduct, index) => (
                         <ProductView
@@ -24,7 +25,10 @@ const FulfillmentBaseTabBody = () => {
                     ))}
                 </Stack>
             </ScrollArea>
-            <Stack flex={2}>
+            <Stack
+                flex={2}
+                gap={"sm"}
+                className={styles.container}>
                 <DealServicesTable />
                 <ProductsActions />
             </Stack>

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css

@@ -1,11 +0,0 @@
-.container {
-    border: dashed 1px var(--mantine-color-default-border);
-    border-radius: var(--mantine-radius-lg);
-}
-
-.image-container {
-    display: flex;
-    max-height: rem(250);
-    max-width: rem(250);
-    height: 100%;
-}

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx

@@ -21,7 +21,7 @@ import ProductViewActions from "@/modules/dealModules/dealEditorTabs/Fulfillment
 import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
 import { ServiceType } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/types/service";
 import ProductServicesTable from "./components/ProductServicesTable";
-import styles from "./ProductView.module.css";
+import styles from "../../FulfillmentBaseTab.module.css";
 
 type Props = {
     dealProduct: DealProductSchema;
@@ -101,7 +101,6 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
         <Flex
             align={"start"}
             direction={"row"}
-            p={"sm"}
             className={styles.container}
             gap={"sm"}>
             <Stack

src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductsActions/ProductsActions.tsx

@@ -41,15 +41,16 @@ const ProductsActions: FC = () => {
     return (
         <Flex
             w={"100%"}
-            direction={"column"}
             gap={"sm"}>
             <Button
                 variant={"default"}
+                fullWidth
                 onClick={onCreateProductClick}>
                 Создать товар
             </Button>
             <Button
                 variant={"default"}
+                fullWidth
                 onClick={onCreateDealProductClick}>
                 Добавить товар
             </Button>