feat: harden kanban responsiveness and visual system

src/components/kanban/kanban-board.tsx

@@ -21,11 +21,22 @@ const STATUS_META: Record<(typeof KANBAN_STATUSES)[number], { label: string; dot
   closed: { label: 'Done', dot: 'bg-emerald-300' },
 };
 
+const STATUS_COLUMN_CLASS: Record<(typeof KANBAN_STATUSES)[number], string> = {
+  open: 'bg-sky-500/10',
+  in_progress: 'bg-amber-500/10',
+  blocked: 'bg-rose-500/10',
+  deferred: 'bg-slate-500/10',
+  closed: 'bg-emerald-500/10',
+};
+
 export function KanbanBoard({ columns, selectedIssueId, onSelect }: KanbanBoardProps) {
   return (
-    <section className="grid min-w-[980px] grid-cols-5 gap-3 xl:min-w-0 xl:grid-cols-5">
+    <section className="flex min-w-fit snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain pb-2">
       {KANBAN_STATUSES.map((status) => (
-        <div key={status} className="rounded-2xl border border-border-soft bg-surface-muted/55 p-2.5">
+        <div
+          key={status}
+          className={`w-[clamp(17rem,24vw,22rem)] shrink-0 snap-start rounded-2xl border border-border-soft ${STATUS_COLUMN_CLASS[status]} p-2.5`}
+        >
           <div className="mb-2 flex items-center justify-between">
             <strong className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-text-body">
               <span className={`h-2 w-2 rounded-full ${STATUS_META[status].dot}`} />
@@ -33,7 +44,7 @@ export function KanbanBoard({ columns, selectedIssueId, onSelect }: KanbanBoardP
             </strong>
             <span className="font-mono text-xs text-text-muted">{columns[status].length}</span>
           </div>
-          <div className="grid gap-2">
+          <div className="grid h-[clamp(24rem,60vh,48rem)] content-start gap-2 overflow-y-auto pr-1">
             <AnimatePresence initial={false}>
               {columns[status].map((issue) => (
                 <KanbanCard key={issue.id} issue={issue} selected={selectedIssueId === issue.id} onSelect={onSelect} />