From a95d05e28b07a7e64aadb9c1fc1693cd3086f3e5 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Thu, 18 Sep 2025 09:50:06 +0400
Subject: [PATCH] feat: styles for deal drawer

---
 .../ToolPanelAction.module.css                |  6 --
 .../ToolPanelAction/ToolPanelAction.tsx       | 26 --------
 .../desktop/TopToolPanel/TopToolPanel.tsx     | 14 ++---
 .../DealEditorDrawer.module.css               |  4 +-
 .../DealEditorDrawer/DealEditorDrawer.tsx     |  5 +-
 .../components/DealEditorBody.tsx             |  5 ++
 .../tabs/GeneralTab/GeneralTab.tsx            | 60 ++++++++++++-------
 .../ActionIconWithTip.module.css              |  5 ++
 .../ActionIconWithTip/ActionIconWithTip.tsx   | 34 +++++++++++
 .../ui/BaseTable/BaseTable.module.css         | 11 ++++
 src/components/ui/BaseTable/BaseTable.tsx     |  6 +-
 .../components/DealServiceRow.tsx             | 29 +++------
 .../FulfillmentBaseTabBody.tsx                |  3 +-
 .../components/LockCheckbox/LockCheckbox.tsx  | 15 +++--
 .../ProductView/ProductView.module.css        | 29 +--------
 .../components/ProductView/ProductView.tsx    | 41 ++++++-------
 .../components/ProductServicesTable.tsx       | 30 ++++++----
 .../components/ProductViewActions.tsx         | 25 ++++----
 .../hooks/useProductServicesTableColumns.tsx  | 34 +++++------
 src/theme.ts                                  |  2 +-
 20 files changed, 199 insertions(+), 185 deletions(-)
 delete mode 100644 src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
 delete mode 100644 src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
 create mode 100644 src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css
 create mode 100644 src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx
 create mode 100644 src/components/ui/BaseTable/BaseTable.module.css

diff --git a/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css b/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
deleted file mode 100644
index 54ea813..0000000
--- a/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.container {
-    width: min-content;
-    cursor: pointer;
-    padding: 6px;
-    height: 100%;
-}
diff --git a/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx b/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
deleted file mode 100644
index 0fec137..0000000
--- a/src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import { ActionIcon, Box } from "@mantine/core";
-import style from "./ToolPanelAction.module.css";
-
-type Props = {
-    onClick: () => void;
-};
-
-const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
-    onClick,
-    children,
-}) => {
-    return (
-        <Box>
-            <ActionIcon
-                variant={"default"}
-                onClick={onClick}
-                radius="lg"
-                className={style.container}>
-                {children}
-            </ActionIcon>
-        </Box>
-    );
-};
-
-export default ToolPanelAction;
diff --git a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
index 55b1d96..bd96bd8 100644
--- a/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
+++ b/src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
@@ -4,12 +4,12 @@ import { FC } from "react";
 import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
 import { Flex, Group, Indicator } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
@@ -89,16 +89,16 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
                     disabled={!isChangedFilters}
                     offset={3}
                     size={8}>
-                    <ToolPanelAction onClick={onFiltersClick}>
+                    <ActionIconWithTip onClick={onFiltersClick}>
                         <IconFilter />
-                    </ToolPanelAction>
+                    </ActionIconWithTip>
                 </Indicator>
-                <ToolPanelAction onClick={onEditClick}>
+                <ActionIconWithTip onClick={onEditClick}>
                     <IconEdit />
-                </ToolPanelAction>
-                <ToolPanelAction onClick={onCreateClick}>
+                </ActionIconWithTip>
+                <ActionIconWithTip onClick={onCreateClick}>
                     <IconPlus />
-                </ToolPanelAction>
+                </ActionIconWithTip>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}
diff --git a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css
index 78d3ffa..72169d1 100644
--- a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.module.css
+++ b/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 {
diff --git a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx b/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx
index b498356..48e4c39 100644
--- a/src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx
+++ b/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,
diff --git a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx b/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx
index 49c19b2..df14681 100644
--- a/src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx
+++ b/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
diff --git a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx b/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx
index f522026..4a80b75 100644
--- a/src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx
+++ b/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)}
diff --git a/src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css b/src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css
new file mode 100644
index 0000000..4d38e4a
--- /dev/null
+++ b/src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css
@@ -0,0 +1,5 @@
+.container {
+    cursor: pointer;
+    min-height: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+    min-width: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+}
diff --git a/src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx b/src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx
new file mode 100644
index 0000000..b22cf9d
--- /dev/null
+++ b/src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx
@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren } from "react";
+import {
+    ActionIcon,
+    ActionIconProps,
+    PolymorphicComponentProps,
+    Tooltip,
+} from "@mantine/core";
+import style from "./ActionIconWithTip.module.css";
+
+type Props = PolymorphicComponentProps<"button", ActionIconProps> & {
+    tipLabel?: string;
+};
+
+const ActionIconWithTip: FC<PropsWithChildren<Props>> = ({
+    children,
+    tipLabel,
+    ...props
+}) => (
+    <Tooltip
+        label={tipLabel}
+        hidden={!tipLabel}
+        h={"max-content"}
+        w={"max-content"}>
+        <ActionIcon
+            variant={"default"}
+            radius={"lg"}
+            className={style.container}
+            {...props}>
+            {children}
+        </ActionIcon>
+    </Tooltip>
+);
+
+export default ActionIconWithTip;
diff --git a/src/components/ui/BaseTable/BaseTable.module.css b/src/components/ui/BaseTable/BaseTable.module.css
new file mode 100644
index 0000000..b300c60
--- /dev/null
+++ b/src/components/ui/BaseTable/BaseTable.module.css
@@ -0,0 +1,11 @@
+
+.table-border {
+    border-width: 1px;
+    border-radius: var(--mantine-radius-lg);
+    @mixin light {
+        border-color: var(--mantine-color-gray-4);
+    }
+    @mixin dark {
+        border-color: var(--mantine-color-dark-4);
+    }
+}
diff --git a/src/components/ui/BaseTable/BaseTable.tsx b/src/components/ui/BaseTable/BaseTable.tsx
index b042a39..3970f75 100644
--- a/src/components/ui/BaseTable/BaseTable.tsx
+++ b/src/components/ui/BaseTable/BaseTable.tsx
@@ -1,14 +1,18 @@
 import React from "react";
+import classNames from "classnames";
 import { DataTable, DataTableProps } from "mantine-datatable";
+import styles from "./BaseTable.module.css";
 
 function BaseTable<T>(props: DataTableProps<T>) {
     return (
         <DataTable
-            withTableBorder
             withRowBorders
             striped={false}
             verticalAlign={"center"}
             backgroundColor={"transparent"}
+            className={classNames(
+                props.withTableBorder && styles["table-border"]
+            )}
             {...props}
         />
     );
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow.tsx
index 0a7a6c6..0bf2043 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/components/DealServiceRow.tsx
@@ -1,16 +1,9 @@
 import { FC } from "react";
 import { IconTrash } from "@tabler/icons-react";
 import { isNumber } from "lodash";
-import {
-    ActionIcon,
-    Divider,
-    Group,
-    NumberInput,
-    Stack,
-    Text,
-    Tooltip,
-} from "@mantine/core";
+import { Divider, Group, NumberInput, Stack, Text } from "@mantine/core";
 import { useDebouncedCallback } from "@mantine/hooks";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { DealServiceSchema } from "@/lib/client";
 import LockCheckbox from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox";
 
@@ -51,19 +44,15 @@ const DealServiceRow: FC<Props> = ({ value, onChange, onDelete }) => {
             <Divider />
             <Text>{value.service.name}</Text>
             <Group>
-                <Tooltip
+                <ActionIconWithTip
                     onClick={() => onDelete(value)}
-                    label="Удалить услугу">
-                    <ActionIcon variant={"default"}>
-                        <IconTrash />
-                    </ActionIcon>
-                </Tooltip>
+                    tipLabel={"Удалить услугу"}>
+                    <IconTrash />
+                </ActionIconWithTip>
                 {/*<Tooltip label="Сотрудники">*/}
-                {/*    <ActionIcon*/}
-                {/*        onClick={() => onEmployeeClick(service)}*/}
-                {/*        variant={"default"}>*/}
-                {/*        <IconUsersGroup />*/}
-                {/*    </ActionIcon>*/}
+                {/*<ActionIcon onClick={() => onEmployeeClick(service)}>*/}
+                {/*    <IconUsersGroup />*/}
+                {/*</ActionIcon>*/}
                 {/*</Tooltip>*/}
                 <NumberInput
                     flex={1}
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx
index f2f63bc..03546ad 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/FulfillmentBaseTabBody/FulfillmentBaseTabBody.tsx
@@ -13,6 +13,7 @@ const FulfillmentBaseTabBody = () => {
             gap={"xs"}>
             <ScrollArea
                 offsetScrollbars={"y"}
+                flex={4}
                 mah={"91vh"}>
                 <Stack>
                     {dealProductsList.dealProducts.map((dealProduct, index) => (
@@ -23,7 +24,7 @@ const FulfillmentBaseTabBody = () => {
                     ))}
                 </Stack>
             </ScrollArea>
-            <Stack>
+            <Stack flex={2}>
                 <DealServicesTable />
                 <ProductsActions />
             </Stack>
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox.tsx
index 029fff4..84a5d30 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/LockCheckbox/LockCheckbox.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { IconLock, IconLockOpen } from "@tabler/icons-react";
-import { ActionIcon, CheckboxProps, Tooltip } from "@mantine/core";
+import { CheckboxProps } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 
 type RestProps = {
     value: boolean;
@@ -15,13 +16,11 @@ const LockCheckbox: FC<Props> = props => {
     const handleChange = () => props.onChange(!props.value);
 
     return (
-        <Tooltip label={props.label}>
-            <ActionIcon
-                onClick={handleChange}
-                variant={props.variant}>
-                {getIcon()}
-            </ActionIcon>
-        </Tooltip>
+        <ActionIconWithTip
+            onClick={handleChange}
+            variant={props.variant}>
+            {getIcon()}
+        </ActionIconWithTip>
     );
 };
 
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css
index 5e37bb4..481819e 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.module.css
@@ -1,11 +1,6 @@
 .container {
-    display: flex;
-    border: dashed var(--item-border-size) var(--mantine-color-default-border);
-    border-radius: var(--item-border-radius);
-    gap: rem(20);
-    padding: rem(10);
-    margin-bottom: rem(10);
-    flex: 1;
+    border: dashed 1px var(--mantine-color-default-border);
+    border-radius: var(--mantine-radius-lg);
 }
 
 .image-container {
@@ -14,23 +9,3 @@
     max-width: rem(250);
     height: 100%;
 }
-
-.services-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: rem(10);
-    flex: 1;
-}
-
-.data-container {
-    max-width: rem(250);
-    display: flex;
-    flex-direction: column;
-    gap: rem(10);
-    flex: 1;
-}
-
-.attributes-container {
-    overflow-wrap: break-word;
-}
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx
index 13baac5..0c1e8a5 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView.tsx
@@ -1,8 +1,7 @@
 import { FC } from "react";
 import { isNumber } from "lodash";
 import {
-    Box,
-    Card,
+    Flex,
     Image,
     NumberInput,
     rem,
@@ -23,6 +22,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";
 
 type Props = {
     dealProduct: DealProductSchema;
@@ -99,23 +99,29 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
     };
 
     return (
-        <Card
+        <Flex
+            align={"start"}
+            direction={"row"}
             p={"sm"}
-            style={{ display: "flex", flexDirection: "row" }}>
-            <Stack gap={"sm"}>
-                <Image
-                    flex={1}
-                    radius={rem(10)}
-                    fit={"cover"}
-                    // src={dealProduct.product.imageUrl}
-                />
+            className={styles.container}
+            gap={"sm"}>
+            <Stack
+                flex={2}
+                gap={"sm"}>
+                {!dealProduct.product && (
+                    <Image
+                        flex={1}
+                        radius={rem(10)}
+                        fit={"cover"}
+                        // src={dealProduct.product.imageUrl}
+                    />
+                )}
                 <Title order={3}>{dealProduct.product.name}</Title>
                 <ProductFieldsList product={dealProduct.product} />
                 {/*<Text>*/}
                 {/*    Штрихкоды:*/}
                 {/*{value.product.barcodes.join(", ")}*/}
                 {/*</Text>*/}
-                <Box />
                 <NumberInput
                     mt={rem(10)}
                     suffix={" шт."}
@@ -126,22 +132,17 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
                     placeholder={"Введите количество товара"}
                 />
                 <Textarea
-                    mih={rem(140)}
-                    styles={{
-                        wrapper: { height: "90%" },
-                        input: { height: "90%" },
-                    }}
-                    my={rem(10)}
                     defaultValue={dealProduct.comment}
                     onChange={event =>
                         debouncedOnChange({
                             comment: event.currentTarget.value,
                         })
                     }
+                    rows={4}
                     placeholder={"Комментарий"}
                 />
             </Stack>
-            <Stack>
+            <Stack flex={5}>
                 <ProductServicesTable
                     dealProduct={dealProduct}
                     onDuplicateServices={() => onDuplicateServices(dealProduct)}
@@ -149,7 +150,7 @@ const ProductView: FC<Props> = ({ dealProduct }) => {
                 />
                 <ProductViewActions dealProduct={dealProduct} />
             </Stack>
-        </Card>
+        </Flex>
     );
 };
 
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductServicesTable.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductServicesTable.tsx
index 2ee801c..ecd2863 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductServicesTable.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductServicesTable.tsx
@@ -1,7 +1,8 @@
 import { FC } from "react";
-import { IconMoodSad } from "@tabler/icons-react";
+import { IconCopy, IconMoodSad } from "@tabler/icons-react";
 import { Button, Flex, Group, Stack, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 import { DealProductSchema, ProductServiceSchema } from "@/lib/client";
 import useProductServicesTableColumns from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns";
@@ -113,6 +114,7 @@ const ProductServicesTable: FC<Props> = ({
                 columns={columns}
                 groups={undefined}
                 idAccessor={"serviceId"}
+                withTableBorder
                 style={{
                     height: isEmptyTable ? "8rem" : "auto",
                 }}
@@ -128,17 +130,21 @@ const ProductServicesTable: FC<Props> = ({
             <Flex
                 justify={"flex-end"}
                 gap={"xs"}
-                pt={isEmptyTable ? 0 : "xs"}>
-                <Button
-                    onClick={() => onKitAdd && onKitAdd()}
-                    variant={"default"}>
-                    Добавить набор услуг
-                </Button>
-                <Button
-                    onClick={() => onDuplicateServices && onDuplicateServices()}
-                    variant={"default"}>
-                    Продублировать услуги
-                </Button>
+                pt={"xs"}>
+                {onDuplicateServices && (
+                    <ActionIconWithTip
+                        tipLabel={"Продублировать услуги"}
+                        onClick={onDuplicateServices}>
+                        <IconCopy />
+                    </ActionIconWithTip>
+                )}
+                {onKitAdd && (
+                    <Button
+                        onClick={onKitAdd}
+                        variant={"default"}>
+                        Добавить набор услуг
+                    </Button>
+                )}
                 <Button
                     onClick={onCreateClick}
                     variant={"default"}>
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductViewActions.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductViewActions.tsx
index 6fc25c2..e5e7bcf 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductViewActions.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/components/ProductViewActions.tsx
@@ -1,7 +1,8 @@
 import { FC } from "react";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
-import { ActionIcon, Flex, rem, Tooltip } from "@mantine/core";
+import { Flex } from "@mantine/core";
 import { modals } from "@mantine/modals";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { DealProductSchema } from "@/lib/client";
 import { useFulfillmentBaseContext } from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/contexts/FulfillmentBaseContext";
 
@@ -35,7 +36,7 @@ const ProductViewActions: FC<Props> = ({ dealProduct }) => {
         <Flex
             mt={"auto"}
             ml={"auto"}
-            gap={rem(10)}>
+            gap={"sm"}>
             {/*<Tooltip*/}
             {/*    onClick={onPrintBarcodeClick}*/}
             {/*    label="Печать штрихкода">*/}
@@ -43,20 +44,16 @@ const ProductViewActions: FC<Props> = ({ dealProduct }) => {
             {/*        <IconBarcode />*/}
             {/*    </ActionIcon>*/}
             {/*</Tooltip>*/}
-            <Tooltip
+            <ActionIconWithTip
                 onClick={onProductEditClick}
-                label="Редактировать товар">
-                <ActionIcon variant={"default"}>
-                    <IconEdit />
-                </ActionIcon>
-            </Tooltip>
-            <Tooltip
+                tipLabel="Редактировать товар">
+                <IconEdit />
+            </ActionIconWithTip>
+            <ActionIconWithTip
                 onClick={() => dealProductsCrud.onDelete(dealProduct)}
-                label="Удалить товар">
-                <ActionIcon variant={"default"}>
-                    <IconTrash />
-                </ActionIcon>
-            </Tooltip>
+                tipLabel="Удалить товар">
+                <IconTrash />
+            </ActionIconWithTip>
         </Flex>
     );
 };
diff --git a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns.tsx b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns.tsx
index fe0d873..901eb33 100644
--- a/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns.tsx
+++ b/src/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/hooks/useProductServicesTableColumns.tsx
@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 import { IconEdit, IconTrash } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
-import { ActionIcon, Box, Flex, Text, Tooltip } from "@mantine/core";
+import { Box, Flex, Text } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { ProductServiceSchema } from "@/lib/client";
 
 type Props = {
@@ -31,21 +32,20 @@ const useProductServicesTableColumns = ({
                     textAlign: "center",
                     width: "0%",
                     render: dealProductService => (
-                        <Flex gap="md">
-                            <Tooltip label="Удалить">
-                                <ActionIcon
-                                    onClick={() => onDelete(dealProductService)}
-                                    variant={"default"}>
-                                    <IconTrash />
-                                </ActionIcon>
-                            </Tooltip>
-                            <Tooltip label="Редактировать">
-                                <ActionIcon
-                                    onClick={() => onChange(dealProductService)}
-                                    variant={"default"}>
-                                    <IconEdit />
-                                </ActionIcon>
-                            </Tooltip>
+                        <Flex
+                            gap="md"
+                            px={"sm"}
+                            my={"sm"}>
+                            <ActionIconWithTip
+                                tipLabel={"Удалить услугу"}
+                                onClick={() => onDelete(dealProductService)}>
+                                <IconTrash />
+                            </ActionIconWithTip>
+                            <ActionIconWithTip
+                                tipLabel="Редактировать"
+                                onClick={() => onChange(dealProductService)}>
+                                <IconEdit />
+                            </ActionIconWithTip>
                             {/*<Tooltip label="Сотрудники">*/}
                             {/*    <ActionIcon*/}
                             {/*        onClick={() =>*/}
@@ -66,7 +66,7 @@ const useProductServicesTableColumns = ({
                     accessor: "price",
                     title: "Цена",
                     footer: data.length > 0 && (
-                        <Box h={"100%"}>
+                        <Box my={"sm"}>
                             <Text fw={700}>
                                 Итог: {totalPrice.toLocaleString("ru")}₽
                             </Text>
diff --git a/src/theme.ts b/src/theme.ts
index 0f11177..dc1f89e 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -14,7 +14,7 @@ export const myColor: MantineColorsTuple = [
     "#00718c",
 ];
 
-const radius = "md";
+const radius = "lg";
 
 const font = Roboto({
     subsets: ["latin"],