# 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