feat: Phase 2 card interactions - priority picker, context menu, WIP limits, column collapse, checklist reorder

- PriorityPicker component with 5 colored chips in card detail modal
- Card context menu: Move to column, Set priority, Duplicate, Delete
- duplicateCard store action (clones card, inserts after original)
- Column WIP limits with amber/red indicators when at/over limit
- Column collapse/expand to 40px vertical strip
- Checklist item drag reordering with grip handle
- Comment store actions (addComment, deleteComment) for Phase 3

src/components/card-detail/CardDetailModal.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { AnimatePresence, motion } from "framer-motion";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { X } from "lucide-react";
 import { useBoardStore } from "@/stores/board-store";
 import { MarkdownEditor } from "@/components/card-detail/MarkdownEditor";
@@ -7,6 +8,7 @@ import { ChecklistSection } from "@/components/card-detail/ChecklistSection";
 import { LabelPicker } from "@/components/card-detail/LabelPicker";
 import { DueDatePicker } from "@/components/card-detail/DueDatePicker";
 import { AttachmentSection } from "@/components/card-detail/AttachmentSection";
+import { PriorityPicker } from "@/components/card-detail/PriorityPicker";
 import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
 
 interface CardDetailModalProps {
@@ -80,8 +82,13 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
               </div>
 
               {/* Dashboard grid body */}
+              <OverlayScrollbarsComponent
+                className="max-h-[calc(85vh-4rem)]"
+                options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true }, overflow: { x: "hidden" } }}
+                defer
+              >
               <motion.div
-                className="grid max-h-[calc(85vh-4rem)] grid-cols-2 gap-4 overflow-y-auto p-5"
+                className="grid grid-cols-2 gap-4 p-5"
                 variants={staggerContainer(0.05)}
                 initial="hidden"
                 animate="visible"
@@ -127,7 +134,15 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
                   <MarkdownEditor cardId={cardId} value={card.description} />
                 </motion.div>
 
-                {/* Row 3: Cover + Attachments */}
+                {/* Row 3: Priority + Cover */}
+                <motion.div
+                  className="rounded-lg bg-pylon-column/50 p-4"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <PriorityPicker cardId={cardId} priority={card.priority} />
+                </motion.div>
+
                 <motion.div
                   className="rounded-lg bg-pylon-column/50 p-4"
                   variants={fadeSlideUp}
@@ -139,8 +154,9 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
                   />
                 </motion.div>
 
+                {/* Row 4: Attachments (full width) */}
                 <motion.div
-                  className="rounded-lg bg-pylon-column/50 p-4"
+                  className="col-span-2 rounded-lg bg-pylon-column/50 p-4"
                   variants={fadeSlideUp}
                   transition={springs.bouncy}
                 >
@@ -150,6 +166,7 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
                   />
                 </motion.div>
               </motion.div>
+              </OverlayScrollbarsComponent>
             </motion.div>
           </div>
         </>