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>
This commit is contained in:
Cody Seibert
2025-12-09 19:13:09 -05:00
parent 8a01c1e167
commit 5853653c00
8 changed files with 323 additions and 32 deletions

View File

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