From 9ba22b9bdf3b135bee39e9f99dec880f07e35402 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Fri, 19 Sep 2025 11:55:08 +0400
Subject: [PATCH] fix: styles for deal drawer fixed

---
 .../DealEditorDrawer/DealEditorDrawer.tsx     |  1 -
 .../components/DealEditorBody.tsx             |  3 +-
 .../FulfillmentBaseTab.module.css             | 44 ++++---------------
 .../DealServicesTable/DealServicesTable.tsx   | 18 ++++----
 .../components/DealServicesTitle.tsx          |  5 +--
 .../components/DealServicesTotalLabel.tsx     |  6 +--
 .../components/ServicesActions.tsx            |  5 +--
 .../FulfillmentBaseTabBody.tsx                | 12 +++--
 .../ProductView/ProductView.module.css        | 11 -----
 .../components/ProductView/ProductView.tsx    |  3 +-
 .../ProductsActions/ProductsActions.tsx       |  3 +-
 11 files changed, 38 insertions(+), 73 deletions(-)
 delete mode 100644 src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css

diff --git a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx
index 48e4c39..8c0ee42 100644
--- a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx
+++ b/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,
diff --git a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx b/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx
index e9b5491..855097d 100644
--- a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx
+++ b/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
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/FulfillmentBaseTab.module.css b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/FulfillmentBaseTab.module.css
index 14c7371..a0f79e1 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/FulfillmentBaseTab.module.css
+++ b/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;
-    gap: rem(10);
-    max-height: 95vh;
-}
-
-.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%;
+    max-height: rem(250);
+    max-width: rem(250);
+    height: 100%;
 }
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/DealServicesTable.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/DealServicesTable.tsx
index 7e24992..4121d67 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/DealServicesTable.tsx
+++ b/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)}
-            h={"100%"}>
-            <Flex
-                h={"100%"}
-                direction={"column"}>
-                <DealServicesTitle />
+            gap={"sm"}
+            mah={"90vh"}>
+            <DealServicesTitle />
+            <ScrollArea
+                scrollbars={"y"}
+                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>
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTitle.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTitle.tsx
index f7eae14..44e4c1c 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTitle.tsx
+++ b/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%"}
-        mb={rem(10)}>
+        w={"100%"}>
         Общие услуги
     </Title>
 );
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTotalLabel.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTotalLabel.tsx
index befa109..74b794e 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServicesTotalLabel.tsx
+++ b/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>
     );
 };
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/ServicesActions.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/ServicesActions.tsx
index a86a385..d5bf112 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/ServicesActions.tsx
+++ b/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={rem(10)}
+            gap={"sm"}
             mt={"auto"}>
             <Button
                 onClick={onCreateClick}
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx
index 03546ad..d54cc06 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx
+++ b/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}
-                mah={"91vh"}>
+                flex={4}>
                 <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>
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css
deleted file mode 100644
index 481819e..0000000
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css
+++ /dev/null
@@ -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%;
-}
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx
index c101d84..beaa9b9 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx
+++ b/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
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductsActions/ProductsActions.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductsActions/ProductsActions.tsx
index 71b04b2..e66b4cc 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductsActions/ProductsActions.tsx
+++ b/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>