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

frontend/js/coding.js

@@ -83,11 +83,8 @@ class CodingManager {
       // Farb-Presets
       this.renderColorPresets();
 
-      // Name-Eingabe für Pfad-Preview
+      // Name-Eingabe (kein Pfad-Preview mehr nötig)
       const nameInput = document.getElementById('coding-name');
-      if (nameInput) {
-        nameInput.addEventListener('input', () => this.updatePathPreview());
-      }
 
       // CLAUDE.md Link Event
       const claudeLink = document.getElementById('coding-claude-link');
@@ -165,17 +162,6 @@ class CodingManager {
     });
   }
 
-  /**
-   * Pfad-Preview aktualisieren
-   */
-  updatePathPreview() {
-    const nameInput = document.getElementById('coding-name');
-    const preview = document.getElementById('coding-path-preview');
-    if (!nameInput || !preview) return;
-
-    const name = nameInput.value.trim();
-    preview.textContent = name || '...';
-  }
 
   // switchClaudeTab entfernt - CLAUDE.md ist jetzt nur readonly
 
@@ -602,6 +588,7 @@ class CodingManager {
 
     // Felder füllen
     document.getElementById('coding-name').value = directory?.name || '';
+    document.getElementById('coding-path').value = directory?.localPath || '';
     document.getElementById('coding-description').value = directory?.description || '';
     document.getElementById('coding-branch').value = directory?.defaultBranch || 'main';
 
@@ -609,8 +596,6 @@ class CodingManager {
     const claudeContent = directory?.claudeMdFromDisk || '';
     this.updateClaudeLink(claudeContent, directory?.name);
 
-    // Pfad-Preview aktualisieren
-    this.updatePathPreview();
 
     // Farbe setzen
     const color = directory?.color || '#4F46E5';
@@ -663,13 +648,11 @@ class CodingManager {
    */
   async handleSave() {
     const name = document.getElementById('coding-name').value.trim();
+    const localPath = document.getElementById('coding-path').value.trim();
     const description = document.getElementById('coding-description').value.trim();
     // CLAUDE.md wird nicht mehr gespeichert - nur readonly
     const defaultBranch = document.getElementById('coding-branch').value.trim() || 'main';
 
-    // Pfad automatisch aus Name generieren
-    const localPath = `${BASE_PATH}/${name}`;
-
     // Farbe ermitteln
     const selectedPreset = document.querySelector('.color-preset.selected');
     const color = selectedPreset?.dataset.color || document.getElementById('coding-color-custom').value;
@@ -685,6 +668,11 @@ class CodingManager {
       return;
     }
 
+    if (!localPath) {
+      showToast('Ordnerpfad ist erforderlich', 'error');
+      return;
+    }
+
     const data = {
       name,
       localPath,