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.
This commit is contained in:
Your Name
2026-02-15 21:41:16 +02:00
parent 08fbeaa1b2
commit 86b833a11b
5 changed files with 665 additions and 59 deletions

View File

@@ -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 ? (