Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Filter-Dropdown und Spalten-Resize gefixt

Browse Source 
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>
This commit is contained in:
Scarriffle
2026-07-27 15:16:35 +02:00
parent 050496a82d
commit 76dc29ac72
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/DataTable.jsx
View File

@@ -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);
}

9
web/src/styles.css
View File

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