Web: Filter-Dropdown und Spalten-Resize gefixt

1) Die Checkboxen im Filter-Dropdown erbten die globale input-Regel (width:100%, Rahmen, margin) und sprengten die Zeile - jetzt zurueckgesetzt, Label fuellt die Breite links. 2) Beim Breiterziehen einer Spalte schrumpfte die flexible (grow-)Spalte, wodurch die Nachbarspalte schmaler wurde und alles nach links wanderte. Die grow-Spalte wird beim Start des Ziehens auf ihre Pixelbreite eingefroren; danach verhalten sich die Spalten unabhaengig wie in Excel.

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

web/src/components/DataTable.jsx

@@ -170,7 +170,17 @@ export default function DataTable({
   const resizing = useRef(null);
   function startResize(e, c) {
     e.preventDefault(); e.stopPropagation();
-    resizing.current = { key: c.key, startX: e.clientX, startW: widthOf(c) };
+    const startW = widthOf(c);
+    // Die flexible (grow-)Spalte auf ihre aktuelle Pixelbreite einfrieren. Sonst
+    // "klaut" das Breiterziehen einer Spalte der grow-Spalte den Platz – dann
+    // schrumpft die Nachbarspalte und alles wandert nach links. Danach verhalten
+    // sich die Spalten wie in Excel (unabhängig, notfalls scrollt die Tabelle).
+    setWidths((old) => {
+      const next = { ...old };
+      for (const gc of growCols) if (next[gc.key] == null) next[gc.key] = Math.round(widthOf(gc));
+      return next;
+    });
+    resizing.current = { key: c.key, startX: e.clientX, startW };
     window.addEventListener("pointermove", onResizeMove);
     window.addEventListener("pointerup", endResize);
   }

web/src/styles.css

@@ -541,16 +541,19 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 }
 .dt-filter-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
 .dt-pop {
-  position: fixed; z-index: 210; min-width: 200px; max-width: 260px;
+  position: fixed; z-index: 210; min-width: 220px; max-width: 320px;
   background: var(--surface); border: 1px solid var(--border-strong);
   border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: var(--sp-2);
 }
 .dt-pop-search { width: 100%; margin: 0 0 var(--sp-2); padding: 5px 8px; font-size: 0.85rem; }
 .dt-pop-actions { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); }
 .dt-pop-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
-.dt-pop-opt { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 0.85rem; cursor: pointer; margin: 0; }
+.dt-pop-opt { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 0.85rem; cursor: pointer; margin: 0; }
 .dt-pop-opt:hover { background: var(--surface-2); }
-.dt-pop-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Ohne diese Ausnahme erben die Checkboxen die globale input-Regel (width:100%,
+   Rahmen, margin) und sprengen die Zeile. */
+.dt-pop-opt input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; accent-color: var(--accent); }
+.dt-pop-opt span { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dt-tree-cell { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
 
 /* ---------- EAN-Code-Zeile ---------- */