refactor(kanban): standardize column width and remove masonry layout

- Remove double-width styling from In Progress column
- Replace masonry 2-column layout with simple vertical stacking
- All Kanban columns now use uniform w-72 width
- Fix Settings view theme consistency with proper CSS variables
- Add action button color variables to theme system

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>

app/src/app/globals.css

@@ -64,6 +64,16 @@
   --color-brand-500: var(--brand-500);
   --color-brand-600: var(--brand-600);
 
+  /* Action button colors */
+  --color-action-view: var(--action-view);
+  --color-action-view-hover: var(--action-view-hover);
+  --color-action-followup: var(--action-followup);
+  --color-action-followup-hover: var(--action-followup-hover);
+  --color-action-commit: var(--action-commit);
+  --color-action-commit-hover: var(--action-commit-hover);
+  --color-action-verify: var(--action-verify);
+  --color-action-verify-hover: var(--action-verify-hover);
+
   /* Border radius */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -113,6 +123,16 @@
   --brand-400: oklch(0.6 0.22 265);
   --brand-500: oklch(0.55 0.25 265);
   --brand-600: oklch(0.5 0.28 270);
+
+  /* Action button colors - Light mode */
+  --action-view: oklch(0.55 0.25 265); /* Purple */
+  --action-view-hover: oklch(0.5 0.28 270);
+  --action-followup: oklch(0.55 0.2 230); /* Blue */
+  --action-followup-hover: oklch(0.5 0.22 230);
+  --action-commit: oklch(0.55 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.5 0.22 140);
+  --action-verify: oklch(0.55 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.5 0.22 140);
 }
 
 .light {
@@ -156,6 +176,16 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.9 0 0);
   --sidebar-ring: oklch(0.55 0.25 265);
+
+  /* Action button colors */
+  --action-view: oklch(0.55 0.25 265); /* Purple */
+  --action-view-hover: oklch(0.5 0.28 270);
+  --action-followup: oklch(0.55 0.2 230); /* Blue */
+  --action-followup-hover: oklch(0.5 0.22 230);
+  --action-commit: oklch(0.55 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.5 0.22 140);
+  --action-verify: oklch(0.55 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.5 0.22 140);
 }
 
 .dark {
@@ -213,6 +243,16 @@
   --sidebar-accent-foreground: oklch(1 0 0);
   --sidebar-border: oklch(1 0 0 / 0.1); /* white/10 for glass borders */
   --sidebar-ring: oklch(0.55 0.25 265);
+
+  /* Action button colors */
+  --action-view: oklch(0.6 0.25 265); /* Purple */
+  --action-view-hover: oklch(0.55 0.27 270);
+  --action-followup: oklch(0.6 0.2 230); /* Blue */
+  --action-followup-hover: oklch(0.55 0.22 230);
+  --action-commit: oklch(0.55 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.5 0.22 140);
+  --action-verify: oklch(0.55 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.5 0.22 140);
 }
 
 .retro {
@@ -278,6 +318,16 @@
 
   /* Fonts */
   --font-sans: var(--font-geist-mono); /* Force Mono everywhere */
+
+  /* Action button colors - All green neon for retro theme */
+  --action-view: oklch(0.85 0.25 145); /* Neon Green */
+  --action-view-hover: oklch(0.9 0.25 145);
+  --action-followup: oklch(0.85 0.25 145); /* Neon Green */
+  --action-followup-hover: oklch(0.9 0.25 145);
+  --action-commit: oklch(0.85 0.25 145); /* Neon Green */
+  --action-commit-hover: oklch(0.9 0.25 145);
+  --action-verify: oklch(0.85 0.25 145); /* Neon Green */
+  --action-verify-hover: oklch(0.9 0.25 145);
 }
 
 /* ========================================
@@ -336,6 +386,16 @@
   --sidebar-accent-foreground: oklch(0.95 0.01 280);
   --sidebar-border: oklch(0.35 0.05 280);
   --sidebar-ring: oklch(0.7 0.2 320);
+
+  /* Action button colors - Dracula purple/pink theme */
+  --action-view: oklch(0.7 0.2 320); /* Purple */
+  --action-view-hover: oklch(0.65 0.22 320);
+  --action-followup: oklch(0.65 0.25 350); /* Pink */
+  --action-followup-hover: oklch(0.6 0.27 350);
+  --action-commit: oklch(0.75 0.2 130); /* Green */
+  --action-commit-hover: oklch(0.7 0.22 130);
+  --action-verify: oklch(0.75 0.2 130); /* Green */
+  --action-verify-hover: oklch(0.7 0.22 130);
 }
 
 /* ========================================

app/src/components/views/board-view.tsx

@@ -1223,7 +1223,6 @@ export function BoardView() {
                     title={column.title}
                     color={column.color}
                     count={columnFeatures.length}
-                    isDoubleWidth={column.id === "in_progress"}
                     headerAction={
                       column.id === "verified" && columnFeatures.length > 0 ? (
                         <Button

app/src/components/views/kanban-column.tsx

@@ -10,7 +10,6 @@ interface KanbanColumnProps {
   color: string;
   count: number;
   children: ReactNode;
-  isDoubleWidth?: boolean;
   headerAction?: ReactNode;
 }
 
@@ -20,7 +19,6 @@ export function KanbanColumn({
   color,
   count,
   children,
-  isDoubleWidth = false,
   headerAction,
 }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({ id });
@@ -29,8 +27,7 @@ export function KanbanColumn({
     <div
       ref={setNodeRef}
       className={cn(
-        "flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors",
-        isDoubleWidth ? "w-[37rem]" : "w-72",
+        "flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors w-72",
         isOver && "bg-accent"
       )}
       data-testid={`kanban-column-${id}`}
@@ -46,14 +43,7 @@ export function KanbanColumn({
       </div>
 
       {/* Column Content */}
-      <div
-        className={cn(
-          "flex-1 overflow-y-auto p-2",
-          isDoubleWidth
-            ? "columns-2 gap-2 [&>*]:break-inside-avoid [&>*]:mb-2"
-            : "space-y-2"
-        )}
-      >
+      <div className="flex-1 overflow-y-auto p-2 space-y-2">
         {children}
       </div>
     </div>

app/src/components/views/settings-view.tsx

@@ -242,7 +242,7 @@ export function SettingsView() {
                     )}
                   </Button>
                 </div>
-                <p className="text-xs text-zinc-500">
+                <p className="text-xs text-muted-foreground">
                   Used for Claude AI features. Get your key at{" "}
                   <a
                     href="https://console.anthropic.com/account/keys"
@@ -336,7 +336,7 @@ export function SettingsView() {
                     )}
                   </Button>
                 </div>
-                <p className="text-xs text-zinc-500">
+                <p className="text-xs text-muted-foreground">
                   Used for Gemini AI features (including image/design prompts).
                   Get your key at{" "}
                   <a
@@ -553,34 +553,34 @@ export function SettingsView() {
           </div>
 
           {/* Kanban Card Display Section */}
-          <div className="rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md overflow-hidden">
-            <div className="p-6 border-b border-white/10">
+          <div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
+            <div className="p-6 border-b border-border">
               <div className="flex items-center gap-2 mb-2">
                 <LayoutGrid className="w-5 h-5 text-brand-500" />
-                <h2 className="text-lg font-semibold text-white">
+                <h2 className="text-lg font-semibold text-foreground">
                   Kanban Card Display
                 </h2>
               </div>
-              <p className="text-sm text-zinc-400">
+              <p className="text-sm text-muted-foreground">
                 Control how much information is displayed on Kanban cards.
               </p>
             </div>
             <div className="p-6 space-y-4">
               <div className="space-y-3">
-                <Label className="text-zinc-300">Detail Level</Label>
+                <Label className="text-foreground">Detail Level</Label>
                 <div className="grid grid-cols-3 gap-3">
                   <button
                     onClick={() => setKanbanCardDetailLevel("minimal")}
                     className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
                       kanbanCardDetailLevel === "minimal"
-                        ? "bg-white/5 border-brand-500 text-white"
-                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
                     }`}
                     data-testid="kanban-detail-minimal"
                   >
                     <Minimize2 className="w-5 h-5" />
                     <span className="font-medium text-sm">Minimal</span>
-                    <span className="text-xs text-zinc-500 text-center">
+                    <span className="text-xs text-muted-foreground text-center">
                       Title & category only
                     </span>
                   </button>
@@ -588,14 +588,14 @@ export function SettingsView() {
                     onClick={() => setKanbanCardDetailLevel("standard")}
                     className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
                       kanbanCardDetailLevel === "standard"
-                        ? "bg-white/5 border-brand-500 text-white"
-                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
                     }`}
                     data-testid="kanban-detail-standard"
                   >
                     <Square className="w-5 h-5" />
                     <span className="font-medium text-sm">Standard</span>
-                    <span className="text-xs text-zinc-500 text-center">
+                    <span className="text-xs text-muted-foreground text-center">
                       Steps & progress
                     </span>
                   </button>
@@ -603,19 +603,19 @@ export function SettingsView() {
                     onClick={() => setKanbanCardDetailLevel("detailed")}
                     className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
                       kanbanCardDetailLevel === "detailed"
-                        ? "bg-white/5 border-brand-500 text-white"
-                        : "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
+                        ? "bg-accent border-brand-500 text-foreground"
+                        : "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
                     }`}
                     data-testid="kanban-detail-detailed"
                   >
                     <Maximize2 className="w-5 h-5" />
                     <span className="font-medium text-sm">Detailed</span>
-                    <span className="text-xs text-zinc-500 text-center">
+                    <span className="text-xs text-muted-foreground text-center">
                       Model, tools & tasks
                     </span>
                   </button>
                 </div>
-                <p className="text-xs text-zinc-500">
+                <p className="text-xs text-muted-foreground">
                   <strong>Minimal:</strong> Shows only title and category
                   <br />
                   <strong>Standard:</strong> Adds steps preview and progress bar
@@ -646,7 +646,7 @@ export function SettingsView() {
             <Button
               variant="secondary"
               onClick={() => setCurrentView("welcome")}
-              className="bg-white/5 hover:bg-white/10 text-white border border-white/10"
+              className="bg-secondary hover:bg-accent text-secondary-foreground border border-border"
               data-testid="back-to-home"
             >
               Back to Home