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}

apps/ui/src/hooks/use-responsive-kanban.ts

@@ -0,0 +1,132 @@
+import { useState, useEffect, useCallback } from "react";
+import { useAppStore } from "@/store/app-store";
+
+export interface ResponsiveKanbanConfig {
+  columnWidth: number;
+  columnMinWidth: number;
+  columnMaxWidth: number;
+  gap: number;
+  padding: number;
+}
+
+// Sidebar dimensions (must match sidebar.tsx values)
+const SIDEBAR_COLLAPSED_WIDTH = 64; // w-16 = 64px
+const SIDEBAR_EXPANDED_WIDTH = 288; // w-72 = 288px (lg breakpoint)
+
+/**
+ * Default configuration for responsive Kanban columns
+ */
+const DEFAULT_CONFIG: ResponsiveKanbanConfig = {
+  columnWidth: 288, // 18rem = 288px (w-72)
+  columnMinWidth: 280, // Minimum column width - increased to ensure usability
+  columnMaxWidth: 400, // Maximum column width - increased for better scaling
+  gap: 20, // gap-5 = 20px
+  padding: 32, // px-4 on both sides = 32px
+};
+
+export interface UseResponsiveKanbanResult {
+  columnWidth: number;
+  containerStyle: React.CSSProperties;
+  isCompact: boolean;
+}
+
+/**
+ * Hook to calculate responsive Kanban column widths based on window size.
+ * Ensures columns scale intelligently to fill available space without
+ * dead space on the right or content being cut off.
+ *
+ * @param columnCount - Number of columns in the Kanban board
+ * @param config - Optional configuration for column sizing
+ * @returns Object with calculated column width and container styles
+ */
+export function useResponsiveKanban(
+  columnCount: number = 4,
+  config: Partial<ResponsiveKanbanConfig> = {}
+): UseResponsiveKanbanResult {
+  const { columnMinWidth, columnMaxWidth, gap, padding } = {
+    ...DEFAULT_CONFIG,
+    ...config,
+  };
+
+  // Get sidebar state from the store to account for its width
+  const sidebarOpen = useAppStore((state) => state.sidebarOpen);
+
+  const calculateColumnWidth = useCallback(() => {
+    if (typeof window === "undefined") {
+      return DEFAULT_CONFIG.columnWidth;
+    }
+
+    // Determine sidebar width based on viewport and sidebar state
+    // On screens < 1024px (lg breakpoint), sidebar is always collapsed width visually
+    const isLargeScreen = window.innerWidth >= 1024;
+    const sidebarWidth = isLargeScreen && sidebarOpen
+      ? SIDEBAR_EXPANDED_WIDTH
+      : SIDEBAR_COLLAPSED_WIDTH;
+
+    // Get the available width (window width minus sidebar and padding)
+    const availableWidth = window.innerWidth - sidebarWidth - padding;
+
+    // Calculate total gap space needed
+    const totalGapWidth = gap * (columnCount - 1);
+
+    // Calculate width available for all columns
+    const widthForColumns = availableWidth - totalGapWidth;
+
+    // Calculate ideal column width
+    let idealWidth = Math.floor(widthForColumns / columnCount);
+
+    // Clamp to min/max bounds
+    idealWidth = Math.max(columnMinWidth, Math.min(columnMaxWidth, idealWidth));
+
+    return idealWidth;
+  }, [columnCount, columnMinWidth, columnMaxWidth, gap, padding, sidebarOpen]);
+
+  const [columnWidth, setColumnWidth] = useState<number>(() =>
+    calculateColumnWidth()
+  );
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleResize = () => {
+      const newWidth = calculateColumnWidth();
+      setColumnWidth(newWidth);
+    };
+
+    // Set initial width
+    handleResize();
+
+    // Use ResizeObserver for more precise updates if available
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(handleResize);
+      observer.observe(document.body);
+
+      return () => {
+        observer.disconnect();
+      };
+    }
+
+    // Fallback to window resize event
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [calculateColumnWidth]);
+
+  // Determine if we're in compact mode (columns at minimum width)
+  const isCompact = columnWidth <= columnMinWidth + 10;
+
+  // Container style to center content and prevent overflow
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    gap: `${gap}px`,
+    height: "100%",
+    justifyContent: "center",
+  };
+
+  return {
+    columnWidth,
+    containerStyle,
+    isCompact,
+  };
+}

apps/ui/src/main.ts

@@ -259,10 +259,10 @@ async function waitForServer(maxAttempts = 30): Promise<void> {
 function createWindow(): void {
   const iconPath = getIconPath();
   const windowOptions: Electron.BrowserWindowConstructorOptions = {
-    width: 1400,
-    height: 900,
-    minWidth: 1024,
-    minHeight: 700,
+    width: 1600,
+    height: 950,
+    minWidth: 1280,
+    minHeight: 768,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       contextIsolation: true,