From ee4bf73c925d6a9bfdcdaa802f7f14f49dae9baa Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 24 May 2026 13:36:12 +0100
Subject: [PATCH] refactor(bases): rename KanbanColumn helper type to
 KanbanColumnData; clsx + font vars

---
 .../features/base/components/views/kanban/kanban-card.tsx  | 7 ++-----
 .../base/components/views/kanban/kanban-column.tsx         | 2 +-
 apps/client/src/features/base/hooks/use-kanban-groups.ts   | 6 +++---
 apps/client/src/features/base/styles/kanban.module.css     | 6 +++---
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/features/base/components/views/kanban/kanban-card.tsx b/apps/client/src/features/base/components/views/kanban/kanban-card.tsx
index dfaa12dc9..500cccf31 100644
--- a/apps/client/src/features/base/components/views/kanban/kanban-card.tsx
+++ b/apps/client/src/features/base/components/views/kanban/kanban-card.tsx
@@ -1,6 +1,7 @@
 import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
 import classes from "@/features/base/styles/kanban.module.css";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
 
 type KanbanCardProps = {
   row: IBaseRow;
@@ -30,11 +31,7 @@ export function KanbanCard({ row, primaryProperty, onClick }: KanbanCardProps) {
         }
       }}
     >
-      <div
-        className={
-          classes.cardTitle + (isEmpty ? " " + classes.cardTitleEmpty : "")
-        }
-      >
+      <div className={clsx(classes.cardTitle, isEmpty && classes.cardTitleEmpty)}>
         {titleText}
       </div>
     </div>
diff --git a/apps/client/src/features/base/components/views/kanban/kanban-column.tsx b/apps/client/src/features/base/components/views/kanban/kanban-column.tsx
index 4d5b0ec2d..464aba76c 100644
--- a/apps/client/src/features/base/components/views/kanban/kanban-column.tsx
+++ b/apps/client/src/features/base/components/views/kanban/kanban-column.tsx
@@ -1,4 +1,4 @@
-import { KanbanColumn as KanbanColumnData } from "@/features/base/hooks/use-kanban-groups";
+import { KanbanColumnData } from "@/features/base/hooks/use-kanban-groups";
 import { IBaseProperty } from "@/features/base/types/base.types";
 import { KanbanCard } from "./kanban-card";
 import { KanbanColumnHeader } from "./kanban-column-header";
diff --git a/apps/client/src/features/base/hooks/use-kanban-groups.ts b/apps/client/src/features/base/hooks/use-kanban-groups.ts
index 1c55605e0..8d3ed66b5 100644
--- a/apps/client/src/features/base/hooks/use-kanban-groups.ts
+++ b/apps/client/src/features/base/hooks/use-kanban-groups.ts
@@ -6,7 +6,7 @@ import {
   SelectTypeOptions,
 } from "@/features/base/types/base.types";
 
-export type KanbanColumn = {
+export type KanbanColumnData = {
   key: string;            // choice id or NO_VALUE_CHOICE_ID
   choiceId: string | null; // null for NO_VALUE column
   name: string;
@@ -15,7 +15,7 @@ export type KanbanColumn = {
 };
 
 export type PartitionResult = {
-  columns: KanbanColumn[];
+  columns: KanbanColumnData[];
   groupByPropertyId: string | null;
 };
 
@@ -87,7 +87,7 @@ export function partitionRowsByGroup(
     buckets.get(key)!.push(row);
   }
 
-  const columns: KanbanColumn[] = order.map((key) => {
+  const columns: KanbanColumnData[] = order.map((key) => {
     if (key === NO_VALUE_CHOICE_ID) {
       return {
         key,
diff --git a/apps/client/src/features/base/styles/kanban.module.css b/apps/client/src/features/base/styles/kanban.module.css
index f3261f695..70bebbefd 100644
--- a/apps/client/src/features/base/styles/kanban.module.css
+++ b/apps/client/src/features/base/styles/kanban.module.css
@@ -38,7 +38,7 @@
 }
 
 .columnCount {
-  font-size: 12px;
+  font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-dimmed);
 }
 
@@ -67,7 +67,7 @@
 }
 
 .cardTitle {
-  font-size: 14px;
+  font-size: var(--mantine-font-size-sm);
   line-height: 1.4;
   word-break: break-word;
 }
@@ -84,6 +84,6 @@
 
 .sortHint {
   padding: 6px 12px;
-  font-size: 12px;
+  font-size: var(--mantine-font-size-xs);
   color: var(--mantine-color-dimmed);
 }