From a7c9c83bb00689ecf7ec8ddce119d08adad5ad03 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 20:25:34 +0200
Subject: [PATCH] feat: apply density factor to card, column, and board spacing

---
 src/components/board/BoardView.tsx     | 2 +-
 src/components/board/CardThumbnail.tsx | 6 ++++--
 src/components/board/KanbanColumn.tsx  | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
index d9bc79f..f8f6a6c 100644
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -296,7 +296,7 @@ export function BoardView() {
         items={columnIds}
         strategy={horizontalListSortingStrategy}
       >
-        <div className="flex h-full gap-6 overflow-x-auto p-6">
+        <div className="flex h-full overflow-x-auto" style={{ gap: `calc(1.5rem * var(--density-factor))`, padding: `calc(1.5rem * var(--density-factor))` }}>
           {board.columns.map((column) => (
             <KanbanColumn
               key={column.id}
diff --git a/src/components/board/CardThumbnail.tsx b/src/components/board/CardThumbnail.tsx
index 483b4e2..1b769e4 100644
--- a/src/components/board/CardThumbnail.tsx
+++ b/src/components/board/CardThumbnail.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { format, isPast, isToday } from "date-fns";
 import { motion, useReducedMotion } from "framer-motion";
 import { useSortable } from "@dnd-kit/sortable";
@@ -28,10 +29,11 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
     data: { type: "card", columnId },
   });
 
-  const style = {
+  const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.3 : undefined,
+    padding: `calc(0.75rem * var(--density-factor))`,
   };
 
   const hasDueDate = card.dueDate != null;
@@ -47,7 +49,7 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
       ref={setNodeRef}
       style={style}
       onClick={handleClick}
-      className="w-full rounded-lg bg-pylon-surface p-3 shadow-sm text-left transition-all duration-200 hover:-translate-y-px hover:shadow-md"
+      className="w-full rounded-lg bg-pylon-surface shadow-sm text-left transition-all duration-200 hover:-translate-y-px hover:shadow-md"
       initial={prefersReducedMotion ? false : { opacity: 0, y: -8 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ type: "spring", stiffness: 300, damping: 25 }}
diff --git a/src/components/board/KanbanColumn.tsx b/src/components/board/KanbanColumn.tsx
index 8becd30..e60c2ed 100644
--- a/src/components/board/KanbanColumn.tsx
+++ b/src/components/board/KanbanColumn.tsx
@@ -84,7 +84,7 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
         strategy={verticalListSortingStrategy}
       >
         <ScrollArea className="flex-1 overflow-y-auto">
-          <ul ref={setDroppableNodeRef} className="flex min-h-[40px] list-none flex-col gap-2 p-2">
+          <ul ref={setDroppableNodeRef} className="flex min-h-[40px] list-none flex-col" style={{ gap: `calc(0.5rem * var(--density-factor))`, padding: `calc(0.5rem * var(--density-factor))` }}>
             {column.cardIds.map((cardId) => {
               const card = board?.cards[cardId];
               if (!card) return null;