From 76dc29ac72dfe7d718c5cd6733e5e7088eca160c Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Mon, 27 Jul 2026 15:16:35 +0200 Subject: [PATCH] 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 --- web/src/components/DataTable.jsx | 12 +++++++++++- web/src/styles.css | 9 ++++++--- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/web/src/components/DataTable.jsx b/web/src/components/DataTable.jsx index 85296f9..a7684bf 100644 --- a/web/src/components/DataTable.jsx +++ b/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); } diff --git a/web/src/styles.css b/web/src/styles.css index ca21e2f..261f093 100644 --- a/web/src/styles.css +++ b/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 ---------- */