fix Coding/UI

frontend/js/board.js

@@ -25,6 +25,9 @@ class BoardManager {
     // Week strip calendar
     this.weekStripDate = this.getMonday(new Date());
     this.tooltip = null;
+    
+    // Layout preferences
+    this.multiColumnLayout = this.loadLayoutPreference();
 
     this.init();
   }
@@ -52,6 +55,21 @@ class BoardManager {
       this.loadStats();
       this.renderWeekStrip();
     });
+    
+    // Apply initial layout preference
+    setTimeout(() => {
+      this.applyLayoutClass();
+      if (this.multiColumnLayout) {
+        this.checkAndApplyDynamicLayout();
+      }
+    }, 100);
+    
+    // Re-check layout on window resize
+    window.addEventListener('resize', debounce(() => {
+      if (this.multiColumnLayout) {
+        this.checkAndApplyDynamicLayout();
+      }
+    }, 250));
   }
 
   // =====================
@@ -144,6 +162,13 @@ class BoardManager {
 
     // Keyboard navigation
     document.addEventListener('keydown', (e) => this.handleKeyboard(e));
+    
+    // Layout toggle button - use delegated event handling
+    document.addEventListener('click', (e) => {
+      if (e.target.closest('#btn-toggle-layout')) {
+        this.toggleLayout();
+      }
+    });
   }
 
   // =====================
@@ -155,6 +180,9 @@ class BoardManager {
 
     const columns = store.get('columns');
     clearElement(this.boardElement);
+    
+    // Apply layout class
+    this.applyLayoutClass();
 
     columns.forEach(column => {
       const columnElement = this.createColumnElement(column);
@@ -170,6 +198,9 @@ class BoardManager {
       'Statuskarte hinzufügen'
     ]);
     this.boardElement.appendChild(addColumnBtn);
+    
+    // Check dynamic layout after render
+    setTimeout(() => this.checkAndApplyDynamicLayout(), 100);
   }
 
   createColumnElement(column) {
@@ -475,6 +506,9 @@ class BoardManager {
         countElement.textContent = filteredTasks.length.toString();
       }
     });
+    
+    // Check if dynamic layout adjustment is needed
+    setTimeout(() => this.checkAndApplyDynamicLayout(), 100);
   }
 
   // =====================
@@ -1461,6 +1495,103 @@ class BoardManager {
     div.textContent = str;
     return div.innerHTML;
   }
+
+  // =====================
+  // LAYOUT PREFERENCES
+  // =====================
+
+  loadLayoutPreference() {
+    const stored = localStorage.getItem('taskmate:boardLayout');
+    return stored === 'multiColumn';
+  }
+
+  saveLayoutPreference(multiColumn) {
+    localStorage.setItem('taskmate:boardLayout', multiColumn ? 'multiColumn' : 'single');
+  }
+
+  toggleLayout() {
+    this.multiColumnLayout = !this.multiColumnLayout;
+    this.saveLayoutPreference(this.multiColumnLayout);
+    this.applyLayoutClass();
+    this.checkAndApplyDynamicLayout();
+    
+    this.showSuccess(this.multiColumnLayout 
+      ? 'Mehrspalten-Layout aktiviert' 
+      : 'Einspalten-Layout aktiviert'
+    );
+  }
+
+  applyLayoutClass() {
+    const toggleBtn = $('#btn-toggle-layout');
+    
+    if (this.multiColumnLayout) {
+      this.boardElement?.classList.add('multi-column-layout');
+      toggleBtn?.classList.add('active');
+    } else {
+      this.boardElement?.classList.remove('multi-column-layout');
+      toggleBtn?.classList.remove('active');
+      
+      // Remove all dynamic classes when disabled
+      const columns = this.boardElement?.querySelectorAll('.column');
+      columns?.forEach(column => {
+        const columnBody = column.querySelector('.column-body');
+        columnBody?.classList.remove('dynamic-2-columns', 'dynamic-3-columns');
+        column.classList.remove('expanded-2x', 'expanded-3x');
+      });
+    }
+  }
+
+  checkAndApplyDynamicLayout() {
+    if (!this.multiColumnLayout || !this.boardElement) return;
+    
+    // Debug logging
+    console.log('[Layout Check] Checking dynamic layout...');
+    
+    // Check each column to see if scrolling is needed
+    const columns = this.boardElement.querySelectorAll('.column');
+    
+    columns.forEach(column => {
+      const columnBody = column.querySelector('.column-body');
+      if (!columnBody) return;
+      
+      // Remove dynamic classes first
+      columnBody.classList.remove('dynamic-2-columns', 'dynamic-3-columns');
+      column.classList.remove('expanded-2x', 'expanded-3x');
+      
+      // Force reflow to get accurate measurements
+      columnBody.offsetHeight;
+      
+      const scrollHeight = columnBody.scrollHeight;
+      const clientHeight = columnBody.clientHeight;
+      const hasOverflow = scrollHeight > clientHeight;
+      
+      console.log('[Layout Check]', {
+        column: column.dataset.columnId,
+        scrollHeight,
+        clientHeight,
+        hasOverflow,
+        ratio: scrollHeight / clientHeight
+      });
+      
+      // Check if content overflows
+      if (hasOverflow && clientHeight > 0) {
+        // Calculate how many columns we need based on content height
+        const ratio = scrollHeight / clientHeight;
+        
+        if (ratio > 2.5 && window.innerWidth >= 1800) {
+          // Need 3 columns
+          console.log('[Layout] Applying 3 columns');
+          columnBody.classList.add('dynamic-3-columns');
+          column.classList.add('expanded-3x');
+        } else if (ratio > 1.1 && window.innerWidth >= 1400) {
+          // Need 2 columns (reduced threshold to 1.1)
+          console.log('[Layout] Applying 2 columns');
+          columnBody.classList.add('dynamic-2-columns');
+          column.classList.add('expanded-2x');
+        }
+      }
+    });
+  }
 }
 
 // Create and export singleton