feat: I'm noticing that when the application is launched, it do...

apps/ui/src/components/views/board-view/components/kanban-column.tsx

@@ -14,6 +14,8 @@ interface KanbanColumnProps {
   opacity?: number;
   showBorder?: boolean;
   hideScrollbar?: boolean;
+  /** Custom width in pixels. If not provided, defaults to 288px (w-72) */
+  width?: number;
 }
 
 export const KanbanColumn = memo(function KanbanColumn({
@@ -26,17 +28,23 @@ export const KanbanColumn = memo(function KanbanColumn({
   opacity = 100,
   showBorder = true,
   hideScrollbar = false,
+  width,
 }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({ id });
 
+  // Use inline style for width if provided, otherwise use default w-72
+  const widthStyle = width ? { width: `${width}px`, flexShrink: 0 } : undefined;
+
   return (
     <div
       ref={setNodeRef}
       className={cn(
-        "relative flex flex-col h-full rounded-xl transition-all duration-200 w-72",
+        "relative flex flex-col h-full rounded-xl transition-all duration-200",
+        !width && "w-72", // Only apply w-72 if no custom width
         showBorder && "border border-border/60",
         isOver && "ring-2 ring-primary/30 ring-offset-1 ring-offset-background"
       )}
+      style={widthStyle}
       data-testid={`kanban-column-${id}`}
     >
       {/* Background layer with opacity */}

apps/ui/src/components/views/board-view/kanban-board.tsx

@@ -15,6 +15,7 @@ import { KanbanColumn, KanbanCard } from "./components";
 import { Feature } from "@/store/app-store";
 import { FastForward, Lightbulb, Archive } from "lucide-react";
 import { useKeyboardShortcutsConfig } from "@/hooks/use-keyboard-shortcuts";
+import { useResponsiveKanban } from "@/hooks/use-responsive-kanban";
 import { COLUMNS, ColumnId } from "./constants";
 
 interface KanbanBoardProps {
@@ -88,6 +89,9 @@ export function KanbanBoard({
   suggestionsCount,
   onArchiveAllVerified,
 }: KanbanBoardProps) {
+  // Use responsive column widths based on window size
+  const { columnWidth } = useResponsiveKanban(COLUMNS.length);
+
   return (
     <div
       className="flex-1 overflow-x-auto px-4 pb-4 relative"
@@ -99,7 +103,7 @@ export function KanbanBoard({
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
-        <div className="flex gap-5 h-full min-w-max py-1">
+        <div className="flex gap-5 h-full py-1 justify-center">
           {COLUMNS.map((column) => {
             const columnFeatures = getColumnFeatures(column.id);
             return (
@@ -109,6 +113,7 @@ export function KanbanBoard({
                 title={column.title}
                 colorClass={column.colorClass}
                 count={columnFeatures.length}
+                width={columnWidth}
                 opacity={backgroundSettings.columnOpacity}
                 showBorder={backgroundSettings.columnBorderEnabled}
                 hideScrollbar={backgroundSettings.hideScrollbar}
@@ -225,7 +230,10 @@ export function KanbanBoard({
           }}
         >
           {activeFeature && (
-            <Card className="w-72 rotate-2 shadow-2xl shadow-black/25 border-primary/50 bg-card/95 backdrop-blur-sm transition-transform">
+            <Card
+              className="rotate-2 shadow-2xl shadow-black/25 border-primary/50 bg-card/95 backdrop-blur-sm transition-transform"
+              style={{ width: `${columnWidth}px` }}
+            >
               <CardHeader className="p-3">
                 <CardTitle className="text-sm font-medium line-clamp-2">
                   {activeFeature.description}