feat: apply density factor to card, column, and board spacing

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}

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 }}

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;