openpylon/docs/plans/2026-02-15-card-detail-redesign-design.md at v1.0.1

Files

Your Name 21302bdfe9 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.

2026-02-15 21:41:16 +02:00

4.0 KiB

Raw Permalink Blame History

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)

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

4.0 KiB Raw Permalink Blame History Unescape Escape

Card Detail Modal Redesign — Design Document