21302bdfe9
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.
74 lines
4.0 KiB
Markdown
74 lines
4.0 KiB
Markdown
# 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
|