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

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