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/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