redesign card detail modal as 2-column dashboard grid

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>
 
+              {/* 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="flex max-h-[80vh] flex-col sm:flex-row"
+                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"
               >
-                {/* Left panel: Title + Markdown (60%) */}
+                {/* Row 1: Labels + Due Date */}
                 <motion.div
-                  className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]"
+                  className="rounded-lg bg-pylon-column/50 p-4"
                   variants={fadeSlideUp}
                   transition={springs.bouncy}
                 >
-                  <div className="mb-4">
-                    <InlineTitle
-                      cardId={cardId}
-                      title={card.title}
-                      updateCard={updateCard}
-                    />
-                  </div>
-
-                  <MarkdownEditor cardId={cardId} value={card.description} />
-                </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"
-                  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,20 +37,30 @@ export function ChecklistSection({ cardId, checklist }: ChecklistSectionProps) {
 
   return (
     <div className="flex flex-col gap-2">
-      {/* Header */}
+      {/* Header + progress */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-1.5">
-        <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
+        <div className="flex items-center justify-between">
-          Checklist
+          <h4 className="font-mono text-xs uppercase tracking-widest text-pylon-text-secondary">
-        </h4>
+            Checklist
+          </h4>
+          {checklist.length > 0 && (
+            <span className="font-mono text-xs text-pylon-text-secondary">
+              {checked}/{checklist.length}
+            </span>
+          )}
+        </div>
         {checklist.length > 0 && (
-          <span className="font-mono text-xs text-pylon-text-secondary">
+          <div className="h-1 w-full overflow-hidden rounded-full bg-pylon-column">
-            {checked}/{checklist.length}
+            <div
-          </span>
+              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 ? (