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 ---------- */