feat(kanban): button to stretch the board to the full window width

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/triage/TasksView.tsx

@@ -8,6 +8,8 @@ import {
   FileText,
   LayoutList,
   Columns,
+  Maximize2,
+  Minimize2,
   ArrowRight,
   ArrowLeft,
   Edit3,
@@ -59,8 +61,11 @@ interface TasksViewProps {
   refreshTrigger?: number;
   initialSelectedTaskId?: string | null;
   openTasksCount?: number; // all open tasks incl. shared lists (same as the nav bar counter)
+  onWideChange?: (wide: boolean) => void; // Kanban stretched to the full window width
 }
 
+const KANBAN_WIDE_KEY = 'mindsift:kanban_wide';
+
 export const TasksView: React.FC<TasksViewProps> = ({
   currentUser,
   onRefreshStats,
@@ -68,8 +73,31 @@ export const TasksView: React.FC<TasksViewProps> = ({
   refreshTrigger = 0,
   initialSelectedTaskId,
   openTasksCount,
+  onWideChange,
 }) => {
   const [viewMode, setViewMode] = useState<'list' | 'kanban'>('list');
+  // Wide Kanban: the board takes the whole window and shows every column in one row
+  const [kanbanWide, setKanbanWide] = useState(() => {
+    try {
+      return localStorage.getItem(KANBAN_WIDE_KEY) === '1';
+    } catch {
+      return false;
+    }
+  });
+  const toggleKanbanWide = () => {
+    const next = !kanbanWide;
+    setKanbanWide(next);
+    try {
+      localStorage.setItem(KANBAN_WIDE_KEY, next ? '1' : '0');
+    } catch {
+      // only a convenience
+    }
+  };
+  const isKanbanWide = viewMode === 'kanban' && kanbanWide;
+  useEffect(() => {
+    onWideChange?.(isKanbanWide);
+  }, [isKanbanWide, onWideChange]);
+  useEffect(() => () => onWideChange?.(false), [onWideChange]);
   const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
   const [tasks, setTasks] = useState<Thought[]>([]);
   const [taskLists, setTaskLists] = useState<TaskList[]>([]);
@@ -1650,16 +1678,31 @@ export const TasksView: React.FC<TasksViewProps> = ({
         {/* Group By & Sort By Dropdowns & Manage Columns button */}
         <div className="flex items-center gap-2 flex-shrink-0 ml-auto">
           {viewMode === 'kanban' ? (
-            !isSelectedListReadOnly && (
-            <button
-              onClick={() => setShowManageColumnsModal(true)}
-              className="btn-action h-7 px-2.5 text-xs flex items-center gap-1.5"
-              title="Kanban-Spalten hinzufügen, umbenennen oder neu anordnen"
-            >
-              <Columns className="w-3.5 h-3.5 text-accent" />
-              <span>Spalten anpassen</span>
-            </button>
-            )
+            <>
+              {!isSelectedListReadOnly && (
+                <button
+                  onClick={() => setShowManageColumnsModal(true)}
+                  className="btn-action h-7 px-2.5 text-xs flex items-center gap-1.5"
+                  title="Kanban-Spalten hinzufügen, umbenennen oder neu anordnen"
+                >
+                  <Columns className="w-3.5 h-3.5 text-accent" />
+                  <span>Spalten anpassen</span>
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={toggleKanbanWide}
+                aria-pressed={kanbanWide}
+                className="btn-action h-7 w-7 p-0 hidden lg:inline-flex items-center justify-center"
+                title={kanbanWide ? 'Board wieder normal breit' : 'Board auf volle Breite strecken'}
+              >
+                {kanbanWide ? (
+                  <Minimize2 className="w-3.5 h-3.5 text-accent" />
+                ) : (
+                  <Maximize2 className="w-3.5 h-3.5 text-accent" />
+                )}
+              </button>
+            </>
           ) : (
             <>
               {/* Group By */}
@@ -2112,7 +2155,12 @@ export const TasksView: React.FC<TasksViewProps> = ({
       {viewMode === 'kanban' ? (
         /* DYNAMIC KANBAN BOARD */
         <div className="space-y-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 pt-1">
+          <div
+            className={`grid grid-cols-1 md:grid-cols-2 gap-3 pt-1 ${
+              isKanbanWide ? 'lg:grid-cols-[repeat(var(--kanban-cols),minmax(0,1fr))]' : 'lg:grid-cols-4'
+            }`}
+            style={isKanbanWide ? ({ '--kanban-cols': activeColumns.length } as React.CSSProperties) : undefined}
+          >
             {activeColumns.map((col, colIdx) => {
               const colTasks = kanbanTasks.filter((t) => {
                 if (col.isDone) {