From 7dcb646b8262fe9f7e037309590b8110ec413b97 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Wed, 12 Mar 2025 00:59:13 +0400
Subject: [PATCH] fix: spacing between statuses and cards, tag labels

---
 src/components/Dnd/Boards/Board/Board.tsx     |  5 ----
 .../Dnd/Cards/CardTags/CardTags.tsx           |  4 +--
 .../CardsDndColumn/DealsDndColumn.module.css  |  1 +
 src/pages/CardsPage/ui/CardsPage.tsx          | 28 +++++++++++--------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/Dnd/Boards/Board/Board.tsx b/src/components/Dnd/Boards/Board/Board.tsx
index c104b63..cdee55e 100644
--- a/src/components/Dnd/Boards/Board/Board.tsx
+++ b/src/components/Dnd/Boards/Board/Board.tsx
@@ -61,11 +61,6 @@ const Board = ({ board }: Props) => {
                 <div
                     {...provided.droppableProps}
                     ref={provided.innerRef}
-                    onMouseEnter={() => {
-                        if (dragState === DragState.DRAG_CARD) {
-                            setSelectedBoard(board);
-                        }
-                    }}
                 >
                     <Draggable
                         draggableId={"board-" + board.id.toString()}
diff --git a/src/components/Dnd/Cards/CardTags/CardTags.tsx b/src/components/Dnd/Cards/CardTags/CardTags.tsx
index 9c2e951..07cecb5 100644
--- a/src/components/Dnd/Cards/CardTags/CardTags.tsx
+++ b/src/components/Dnd/Cards/CardTags/CardTags.tsx
@@ -1,4 +1,4 @@
-import { Center, Checkbox, Group, Menu, Pill, rem, Stack, Text } from "@mantine/core";
+import { Center, Checkbox, Group, Menu, Pill, rem, Stack } from "@mantine/core";
 import { CardTagSchema, CardTagService } from "../../../../client";
 import { IconPlus } from "@tabler/icons-react";
 import styles from "./CardTags.module.css";
@@ -63,8 +63,8 @@ const CardTags = ({ tags, cardId, groupId }: Props) => {
                             <Checkbox
                                 checked={!!tags.find(cardTag => cardTag.id === tag.id)}
                                 onClick={(event) => onTagClick(tag, event)}
+                                label={tag.name}
                             />
-                            <Text>{tag.name}</Text>
                         </Group>
                     ))}
                 </Stack>
diff --git a/src/components/Dnd/Cards/CardsDndColumn/DealsDndColumn.module.css b/src/components/Dnd/Cards/CardsDndColumn/DealsDndColumn.module.css
index b65d20d..60db21a 100644
--- a/src/components/Dnd/Cards/CardsDndColumn/DealsDndColumn.module.css
+++ b/src/components/Dnd/Cards/CardsDndColumn/DealsDndColumn.module.css
@@ -11,6 +11,7 @@
     flex-direction: column;
     /*background-color: red;*/
     height: 100%;
+    margin-top: 8px;
 }
 
 .items-list::after {
diff --git a/src/pages/CardsPage/ui/CardsPage.tsx b/src/pages/CardsPage/ui/CardsPage.tsx
index dd4a195..4bab51d 100644
--- a/src/pages/CardsPage/ui/CardsPage.tsx
+++ b/src/pages/CardsPage/ui/CardsPage.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { useCardSummaries } from "../hooks/useCardSummaries.tsx";
 import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
 import CardEditDrawer from "../drawers/CardEditDrawer/CardEditDrawer.tsx";
@@ -25,18 +25,22 @@ export const CardsPage: FC = () => {
 
     const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
 
-    const tableBody = (
-        <CardsTable items={data} />
-    );
+    const tableBody = useMemo(() => {
+        return (
+            <CardsTable items={data} />
+        );
+    }, [data]);
 
-    const boardsBody = (
-        <DndContextProvider
-            summariesRaw={summariesRaw}
-            refetchSummaries={refetchSummaries}
-        >
-            <Boards />
-        </DndContextProvider>
-    );
+    const boardsBody = useMemo(() => {
+        return (
+            <DndContextProvider
+                summariesRaw={summariesRaw}
+                refetchSummaries={refetchSummaries}
+            >
+                <Boards />
+            </DndContextProvider>
+        );
+    }, [summariesRaw]);
 
     const getBody = () => {
         return (