feat: redesign card detail modal as 2-column dashboard grid

Replace 60/40 split layout with a 2x3 CSS grid where all sections
get equal weight. Cover color header, progress bar on checklist,
compact markdown editor, scroll containment on long lists.

docs/plans/2026-02-15-card-detail-redesign-design.md

@@ -0,0 +1,73 @@
+# Card Detail Modal Redesign — Design Document
+
+**Date:** 2026-02-15
+**Status:** Approved
+
+## Problem
+
+The current card detail modal uses a 60/40 split layout with a massive markdown editor on the left and all metadata (cover, labels, due date, checklist, attachments) crammed into a narrow right sidebar. This is unbalanced — the description field dominates despite being lightly used, while actionable sections like checklist are squeezed.
+
+## Design Decisions (from brainstorming)
+
+| Question | Answer |
+|----------|--------|
+| Primary use when opening card | Scan everything at once |
+| Description importance | Light use (short notes) |
+| Modal size | Go wider |
+| Layout style | Dashboard grid |
+| Section prominence | Equal weight |
+| Long checklist behavior | Scroll within cell |
+| Title position | Full-width header with cover color |
+| Attachment display | Compact list |
+| Description visibility | Always visible cell in grid |
+
+## Layout
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  ██████████████████████████████████████████████████  [×]  │  Cover color header
+│  Card Title (click to edit)                              │  Inline-editable
+├────────────────────────────┬─────────────────────────────┤
+│  LABELS                    │  DUE DATE                   │  Row 1: metadata
+│  [Tag] [Tag] [Tag] [+]    │  Feb 20 · 5 days left       │
+├────────────────────────────┼─────────────────────────────┤
+│  CHECKLIST          2/5   │  DESCRIPTION                 │  Row 2: content
+│  ✓ item 1                 │  Short notes here...         │
+│  ☐ item 2   (scroll)     │  (click to edit)             │
+│  + Add item               │                              │
+├────────────────────────────┼─────────────────────────────┤
+│  COVER                     │  ATTACHMENTS                 │  Row 3: secondary
+│  ○ ○ ○ ○ ○ ○ ○ ○ ×      │  file.pdf · doc.png          │
+│                            │  [+ Add file]                │
+└────────────────────────────┴─────────────────────────────┘
+```
+
+### Header
+- Full-width bar with cover color as background (or neutral `pylon-surface` if no cover)
+- White text on colored bg, normal text on surface bg
+- Inline-editable title (click → input → Enter/Escape)
+- Close [×] button top-right
+
+### Grid Body
+- CSS Grid: `grid-template-columns: 1fr 1fr`, `gap: 1rem`
+- Each cell: `rounded-lg bg-pylon-column/50 p-4`
+- Section headers: `font-mono text-xs uppercase tracking-widest text-pylon-text-secondary`
+- Row 1: Labels + Due Date (small metadata)
+- Row 2: Checklist + Description (main content, max-h ~200px with internal scroll)
+- Row 3: Cover Color + Attachments (secondary)
+
+### Modal
+- Width: `max-w-4xl` (up from `max-w-3xl`)
+- Max height: `max-h-[85vh]` with body scrollable
+- Shared layout animation preserved (`layoutId`)
+
+### Animation
+- Grid cells stagger in with `fadeSlideUp` + `staggerContainer(0.05)`
+- Backdrop blur + fade (existing)
+- Escape/click-outside to close (existing)
+
+## Files to Modify
+- `src/components/card-detail/CardDetailModal.tsx` — Full rewrite of layout
+- `src/components/card-detail/MarkdownEditor.tsx` — Remove min-h-200, adapt for grid cell
+- `src/components/card-detail/ChecklistSection.tsx` — Add max-height + scroll
+- Minor: LabelPicker, DueDatePicker, AttachmentSection — No structural changes needed

docs/plans/2026-02-15-card-detail-redesign-implementation.md

@@ -0,0 +1,467 @@
+# Card Detail Modal Redesign — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Replace the 60/40 split card detail modal with a 2-column dashboard grid where every section gets equal weight.
+
+**Architecture:** Full rewrite of `CardDetailModal.tsx` to use CSS Grid (2 cols, 3 rows) under a cover-color header. Sub-components (`MarkdownEditor`, `ChecklistSection`) get minor tweaks for cell sizing. `CoverColorPicker` moves from inline private component to its own grid cell. Framer Motion stagger preserved.
+
+**Tech Stack:** React 19, TypeScript, Framer Motion 12, Tailwind 4, Zustand
+
+---
+
+### Task 1: Rewrite CardDetailModal — header + grid shell
+
+**Files:**
+- Modify: `src/components/card-detail/CardDetailModal.tsx` (full rewrite, lines 1-245)
+
+**Step 1: Replace the entire file with the new layout**
+
+Replace the full contents of `CardDetailModal.tsx` with:
+
+```tsx
+import { useState, useEffect, useRef } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+import { useBoardStore } from "@/stores/board-store";
+import { MarkdownEditor } from "@/components/card-detail/MarkdownEditor";
+import { ChecklistSection } from "@/components/card-detail/ChecklistSection";
+import { LabelPicker } from "@/components/card-detail/LabelPicker";
+import { DueDatePicker } from "@/components/card-detail/DueDatePicker";
+import { AttachmentSection } from "@/components/card-detail/AttachmentSection";
+import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
+
+interface CardDetailModalProps {
+  cardId: string | null;
+  onClose: () => void;
+}
+
+export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
+  const card = useBoardStore((s) =>
+    cardId ? s.board?.cards[cardId] ?? null : null
+  );
+  const boardLabels = useBoardStore((s) => s.board?.labels ?? []);
+  const updateCard = useBoardStore((s) => s.updateCard);
+
+  const open = cardId != null && card != null;
+
+  return (
+    <AnimatePresence>
+      {open && card && cardId && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            onClick={onClose}
+          />
+
+          {/* Modal */}
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4"
+            onClick={onClose}
+          >
+            <motion.div
+              layoutId={`card-${cardId}`}
+              className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
+              transition={springs.gentle}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <EscapeHandler onClose={onClose} />
+              <span className="sr-only">Card detail editor</span>
+
+              {/* Header: cover color background + title + close */}
+              <div
+                className="relative flex items-center gap-3 px-6 py-4"
+                style={{
+                  backgroundColor: card.coverColor
+                    ? `oklch(55% 0.12 ${card.coverColor})`
+                    : undefined,
+                }}
+              >
+                <InlineTitle
+                  cardId={cardId}
+                  title={card.title}
+                  updateCard={updateCard}
+                  hasColor={card.coverColor != null}
+                />
+                <button
+                  onClick={onClose}
+                  className={`absolute right-4 top-1/2 -translate-y-1/2 rounded-md p-1 transition-colors ${
+                    card.coverColor
+                      ? "text-white/70 hover:bg-white/20 hover:text-white"
+                      : "text-pylon-text-secondary hover:bg-pylon-column hover:text-pylon-text"
+                  }`}
+                  aria-label="Close"
+                >
+                  <X className="size-5" />
+                </button>
+              </div>
+
+              {/* Dashboard grid body */}
+              <motion.div
+                className="grid max-h-[calc(85vh-4rem)] grid-cols-2 gap-4 overflow-y-auto p-5"
+                variants={staggerContainer(0.05)}
+                initial="hidden"
+                animate="visible"
+              >
+                {/* Row 1: Labels + Due Date */}
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <LabelPicker
+                    cardId={cardId}
+                    cardLabelIds={card.labels}
+                    boardLabels={boardLabels}
+                  />
+                </motion.div>
+
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <DueDatePicker cardId={cardId} dueDate={card.dueDate} />
+                </motion.div>
+
+                {/* Row 2: Checklist + Description */}
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <ChecklistSection
+                    cardId={cardId}
+                    checklist={card.checklist}
+                  />
+                </motion.div>
+
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <MarkdownEditor cardId={cardId} value={card.description} />
+                </motion.div>
+
+                {/* Row 3: Cover + Attachments */}
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <CoverColorPicker
+                    cardId={cardId}
+                    coverColor={card.coverColor}
+                  />
+                </motion.div>
+
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <AttachmentSection
+                    cardId={cardId}
+                    attachments={card.attachments}
+                  />
+                </motion.div>
+              </motion.div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/* ---------- Escape key handler ---------- */
+
+function EscapeHandler({ onClose }: { onClose: () => void }) {
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return null;
+}
+
+/* ---------- Inline editable title ---------- */
+
+interface InlineTitleProps {
+  cardId: string;
+  title: string;
+  updateCard: (cardId: string, updates: { title: string }) => void;
+  hasColor: boolean;
+}
+
+function InlineTitle({ cardId, title, updateCard, hasColor }: InlineTitleProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setDraft(title);
+  }, [title]);
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  function handleSave() {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== title) {
+      updateCard(cardId, { title: trimmed });
+    } else {
+      setDraft(title);
+    }
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      setDraft(title);
+      setEditing(false);
+    }
+  }
+
+  const textColor = hasColor ? "text-white" : "text-pylon-text";
+  const hoverColor = hasColor ? "hover:text-white/80" : "hover:text-pylon-accent";
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={handleSave}
+        onKeyDown={handleKeyDown}
+        className={`flex-1 font-heading text-xl bg-transparent outline-none border-b pb-0.5 ${
+          hasColor ? "text-white border-white/50" : "text-pylon-text border-pylon-accent"
+        }`}
+      />
+    );
+  }
+
+  return (
+    <h2
+      onClick={() => setEditing(true)}
+      className={`flex-1 cursor-pointer font-heading text-xl transition-colors ${textColor} ${hoverColor}`}
+    >
+      {title}
+    </h2>
+  );
+}
+
+/* ---------- Cover color picker ---------- */
+
+function CoverColorPicker({
+  cardId,
+  coverColor,
+}: {
+  cardId: string;
+  coverColor: string | null;
+}) {
+  const updateCard = useBoardStore((s) => s.updateCard);
+  const presets = [
+    { hue: "160", label: "Teal" },
+    { hue: "240", label: "Blue" },
+    { hue: "300", label: "Purple" },
+    { hue: "350", label: "Pink" },
+    { hue: "25", label: "Red" },
+    { hue: "55", label: "Orange" },
+    { hue: "85", label: "Yellow" },
+    { hue: "130", label: "Lime" },
+    { hue: "200", label: "Cyan" },
+    { hue: "0", label: "Slate" },
+  ];
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+        Cover
+      </h4>
+      <div className="flex flex-wrap gap-1.5">
+        <button
+          onClick={() => updateCard(cardId, { coverColor: null })}
+          className="flex size-6 items-center justify-center rounded-full border border-border text-xs text-pylon-text-secondary hover:bg-pylon-column"
+          title="None"
+        >
+          &times;
+        </button>
+        {presets.map(({ hue, label }) => (
+          <button
+            key={hue}
+            onClick={() => updateCard(cardId, { coverColor: hue })}
+            className="size-6 rounded-full transition-transform hover:scale-110"
+            style={{
+              backgroundColor: `oklch(55% 0.12 ${hue})`,
+              outline:
+                coverColor === hue ? "2px solid currentColor" : "none",
+              outlineOffset: "1px",
+            }}
+            title={label}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+**Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+**Step 3: Commit**
+
+```bash
+git add src/components/card-detail/CardDetailModal.tsx
+git commit -m "feat: rewrite card detail modal as 2-column dashboard grid"
+```
+
+---
+
+### Task 2: Adapt MarkdownEditor for grid cell
+
+**Files:**
+- Modify: `src/components/card-detail/MarkdownEditor.tsx` (lines 93-103)
+
+**Step 1: Replace `min-h-[200px]` with cell-friendly sizing**
+
+In `MarkdownEditor.tsx`, change the textarea className (line 99):
+
+```
+Old: className="min-h-[200px] w-full resize-y rounded-md ...
+New: className="min-h-[100px] max-h-[160px] w-full resize-y rounded-md ...
+```
+
+And change the preview container className (line 103):
+
+```
+Old: className="min-h-[200px] cursor-pointer rounded-md ...
+New: className="min-h-[100px] max-h-[160px] overflow-y-auto cursor-pointer rounded-md ...
+```
+
+**Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+**Step 3: Commit**
+
+```bash
+git add src/components/card-detail/MarkdownEditor.tsx
+git commit -m "feat: adapt markdown editor sizing for dashboard grid cell"
+```
+
+---
+
+### Task 3: Add scroll containment to ChecklistSection
+
+**Files:**
+- Modify: `src/components/card-detail/ChecklistSection.tsx` (lines 52-64)
+
+**Step 1: Add max-height + overflow to the checklist items container**
+
+In `ChecklistSection.tsx`, change the items container (line 53):
+
+```
+Old: <div className="flex flex-col gap-1">
+New: <div className="flex max-h-[160px] flex-col gap-1 overflow-y-auto">
+```
+
+Also add a small progress bar under the header. Change lines 39-50 (the header section) to:
+
+```tsx
+      {/* Header + progress */}
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-center justify-between">
+          <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+            Checklist
+          </h4>
+          {checklist.length > 0 && (
+            <span className="font-mono text-xs text-pylon-text-secondary">
+              {checked}/{checklist.length}
+            </span>
+          )}
+        </div>
+        {checklist.length > 0 && (
+          <div className="h-1 w-full overflow-hidden rounded-full bg-pylon-column">
+            <div
+              className="h-full rounded-full bg-pylon-accent transition-all duration-300"
+              style={{ width: `${(checked / checklist.length) * 100}%` }}
+            />
+          </div>
+        )}
+      </div>
+```
+
+**Step 2: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+**Step 3: Commit**
+
+```bash
+git add src/components/card-detail/ChecklistSection.tsx
+git commit -m "feat: add scroll containment and progress bar to checklist"
+```
+
+---
+
+### Task 4: Remove unused Separator import + visual verification
+
+**Files:**
+- Modify: `src/components/card-detail/CardDetailModal.tsx` (verify no stale imports)
+
+**Step 1: Verify the file has no unused imports**
+
+The rewrite in Task 1 already removed the `Separator` import. Confirm the import block does NOT include:
+- `import { Separator } from "@/components/ui/separator";`
+
+If it's still there, delete it.
+
+**Step 2: Run TypeScript check**
+
+Run: `npx tsc --noEmit`
+Expected: No errors
+
+**Step 3: Run the dev server and visually verify**
+
+Run: `npm run dev` (or `npx tauri dev` if checking in Tauri)
+
+Verify:
+- Card detail modal opens on card click
+- Full-width header shows cover color (or neutral bg)
+- Title is editable (click to edit, Enter/Escape)
+- Close button [x] works
+- 2x3 grid: Labels | Due Date / Checklist | Description / Cover | Attachments
+- Each cell has rounded-lg background
+- Checklist scrolls when > ~6 items
+- Description shows compact preview
+- All animations stagger in
+- Escape closes modal
+- Click outside closes modal
+
+**Step 4: Commit**
+
+```bash
+git add -A
+git commit -m "feat: card detail modal dashboard grid redesign complete"
+```

src/components/card-detail/CardDetailModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { Separator } from "@/components/ui/separator";
+import { X } from "lucide-react";
 import { useBoardStore } from "@/stores/board-store";
 import { MarkdownEditor } from "@/components/card-detail/MarkdownEditor";
 import { ChecklistSection } from "@/components/card-detail/ChecklistSection";
@@ -38,74 +38,112 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
           />
 
           {/* Modal */}
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4"
+            onClick={onClose}
+          >
             <motion.div
               layoutId={`card-${cardId}`}
-              className="relative w-full max-w-3xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
+              className="relative w-full max-w-4xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
               transition={springs.gentle}
               onClick={(e) => e.stopPropagation()}
             >
-              {/* Close on Escape */}
               <EscapeHandler onClose={onClose} />
-
-              {/* Hidden accessible description */}
               <span className="sr-only">Card detail editor</span>
 
-              <motion.div
+              {/* Header: cover color background + title + close */}
-                className="flex max-h-[80vh] flex-col sm:flex-row"
+              <div
-                variants={staggerContainer(0.05)}
+                className="relative flex items-center gap-3 px-6 py-4"
-                initial="hidden"
+                style={{
-                animate="visible"
+                  backgroundColor: card.coverColor
+                    ? `oklch(55% 0.12 ${card.coverColor})`
+                    : undefined,
+                }}
               >
-                {/* Left panel: Title + Markdown (60%) */}
-                <motion.div
-                  className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]"
-                  variants={fadeSlideUp}
-                  transition={springs.bouncy}
-                >
-                  <div className="mb-4">
                 <InlineTitle
                   cardId={cardId}
                   title={card.title}
                   updateCard={updateCard}
+                  hasColor={card.coverColor != null}
                 />
+                <button
+                  onClick={onClose}
+                  className={`absolute right-4 top-1/2 -translate-y-1/2 rounded-md p-1 transition-colors ${
+                    card.coverColor
+                      ? "text-white/70 hover:bg-white/20 hover:text-white"
+                      : "text-pylon-text-secondary hover:bg-pylon-column hover:text-pylon-text"
+                  }`}
+                  aria-label="Close"
+                >
+                  <X className="size-5" />
+                </button>
               </div>
 
-                  <MarkdownEditor cardId={cardId} value={card.description} />
+              {/* Dashboard grid body */}
-                </motion.div>
-
-                {/* Vertical separator */}
-                <Separator orientation="vertical" className="hidden sm:block" />
-
-                {/* Right sidebar (40%) */}
               <motion.div
-                  className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0"
+                className="grid max-h-[calc(85vh-4rem)] grid-cols-2 gap-4 overflow-y-auto p-5"
+                variants={staggerContainer(0.05)}
+                initial="hidden"
+                animate="visible"
+              >
+                {/* Row 1: Labels + Due Date */}
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
                   variants={fadeSlideUp}
                   transition={springs.bouncy}
                 >
-                  <CoverColorPicker cardId={cardId} coverColor={card.coverColor} />
-
-                  <Separator />
-
                   <LabelPicker
                     cardId={cardId}
                     cardLabelIds={card.labels}
                     boardLabels={boardLabels}
                   />
+                </motion.div>
 
-                  <Separator />
+                <motion.div
-
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
                   <DueDatePicker cardId={cardId} dueDate={card.dueDate} />
+                </motion.div>
 
-                  <Separator />
+                {/* Row 2: Checklist + Description */}
-
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
                   <ChecklistSection
                     cardId={cardId}
                     checklist={card.checklist}
                   />
+                </motion.div>
 
-                  <Separator />
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <MarkdownEditor cardId={cardId} value={card.description} />
+                </motion.div>
 
+                {/* Row 3: Cover + Attachments */}
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <CoverColorPicker
+                    cardId={cardId}
+                    coverColor={card.coverColor}
+                  />
+                </motion.div>
+
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
                   <AttachmentSection
                     cardId={cardId}
                     attachments={card.attachments}
@@ -139,9 +177,10 @@ interface InlineTitleProps {
   cardId: string;
   title: string;
   updateCard: (cardId: string, updates: { title: string }) => void;
+  hasColor: boolean;
 }
 
-function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
+function InlineTitle({ cardId, title, updateCard, hasColor }: InlineTitleProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(title);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -177,6 +216,9 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
     }
   }
 
+  const textColor = hasColor ? "text-white" : "text-pylon-text";
+  const hoverColor = hasColor ? "hover:text-white/80" : "hover:text-pylon-accent";
+
   if (editing) {
     return (
       <input
@@ -185,7 +227,9 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
         onChange={(e) => setDraft(e.target.value)}
         onBlur={handleSave}
         onKeyDown={handleKeyDown}
-        className="font-heading text-xl text-pylon-text bg-transparent outline-none border-b border-pylon-accent pb-0.5"
+        className={`flex-1 font-heading text-xl bg-transparent outline-none border-b pb-0.5 ${
+          hasColor ? "text-white border-white/50" : "text-pylon-text border-pylon-accent"
+        }`}
       />
     );
   }
@@ -193,7 +237,7 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
   return (
     <h2
       onClick={() => setEditing(true)}
-      className="cursor-pointer font-heading text-xl text-pylon-text transition-colors hover:text-pylon-accent"
+      className={`flex-1 cursor-pointer font-heading text-xl transition-colors ${textColor} ${hoverColor}`}
     >
       {title}
     </h2>
@@ -202,14 +246,25 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
 
 /* ---------- Cover color picker ---------- */
 
-function CoverColorPicker({ cardId, coverColor }: { cardId: string; coverColor: string | null }) {
+function CoverColorPicker({
+  cardId,
+  coverColor,
+}: {
+  cardId: string;
+  coverColor: string | null;
+}) {
   const updateCard = useBoardStore((s) => s.updateCard);
   const presets = [
-    { hue: "160", label: "Teal" }, { hue: "240", label: "Blue" },
+    { hue: "160", label: "Teal" },
-    { hue: "300", label: "Purple" }, { hue: "350", label: "Pink" },
+    { hue: "240", label: "Blue" },
-    { hue: "25", label: "Red" }, { hue: "55", label: "Orange" },
+    { hue: "300", label: "Purple" },
-    { hue: "85", label: "Yellow" }, { hue: "130", label: "Lime" },
+    { hue: "350", label: "Pink" },
-    { hue: "200", label: "Cyan" }, { hue: "0", label: "Slate" },
+    { hue: "25", label: "Red" },
+    { hue: "55", label: "Orange" },
+    { hue: "85", label: "Yellow" },
+    { hue: "130", label: "Lime" },
+    { hue: "200", label: "Cyan" },
+    { hue: "0", label: "Slate" },
   ];
 
   return (
@@ -232,7 +287,8 @@ function CoverColorPicker({ cardId, coverColor }: { cardId: string; coverColor:
             className="size-6 rounded-full transition-transform hover:scale-110"
             style={{
               backgroundColor: `oklch(55% 0.12 ${hue})`,
-              outline: coverColor === hue ? "2px solid currentColor" : "none",
+              outline:
+                coverColor === hue ? "2px solid currentColor" : "none",
               outlineOffset: "1px",
             }}
             title={label}

src/components/card-detail/ChecklistSection.tsx

@@ -37,7 +37,8 @@ export function ChecklistSection({ cardId, checklist }: ChecklistSectionProps) {
 
   return (
     <div className="flex flex-col gap-2">
-      {/* Header */}
+      {/* Header + progress */}
+      <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
           <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
             Checklist
@@ -48,9 +49,18 @@ export function ChecklistSection({ cardId, checklist }: ChecklistSectionProps) {
             </span>
           )}
         </div>
+        {checklist.length > 0 && (
+          <div className="h-1 w-full overflow-hidden rounded-full bg-pylon-column">
+            <div
+              className="h-full rounded-full bg-pylon-accent transition-all duration-300"
+              style={{ width: `${(checked / checklist.length) * 100}%` }}
+            />
+          </div>
+        )}
+      </div>
 
       {/* Items */}
-      <div className="flex flex-col gap-1">
+      <div className="flex max-h-[160px] flex-col gap-1 overflow-y-auto">
         {checklist.map((item) => (
           <ChecklistRow
             key={item.id}

src/components/card-detail/MarkdownEditor.tsx

@@ -96,11 +96,11 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
           onChange={handleChange}
           onBlur={handleBlur}
           placeholder="Add a description... (Markdown supported)"
-          className="min-h-[200px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
+          className="min-h-[100px] max-h-[160px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
         />
       ) : (
         <div
-          className="min-h-[200px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
+          className="min-h-[100px] max-h-[160px] overflow-y-auto cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
           onClick={() => setMode("edit")}
         >
           {draft ? (