ZDDC
cfdf0f6db9
Two UI fixes: - "By existing" catalog columns were far too wide. The seltable forced the table to width:100% (auto-layout then stretches columns) and — in the classifier's copy — the per-column filter <input>s had no styling, so each fell back to its ~170px intrinsic width and dictated the column width. Set the table to width:auto (cells are already nowrap → fit header/longest cell) and style .seltable__colfilter to fill its column (min-width:2rem, box-sizing:border-box) so the inputs never widen a column. Applied to both the classifier copy and shared/seltable.css (same fix for the tables tool's "Add from archive" table). - The left Folder Tree rendered folders and files in raw scan order. Sort both at render — case-insensitive, natural (so "Rev 2" precedes "Rev 10") — via a non-mutating slice().sort() at each render point in tree.js. Tests: a new spec asserts the natural/case-insensitive tree order; 62 classify + classifier green (108 across classify/classifier/tables/tables-mdl). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
47 lines
3.3 KiB
CSS
47 lines
3.3 KiB
CSS
/* ── Shared selectable + autofilter table (seltable) + its hosting overlay ───
|
|
Used by the tables tool's "Add from archive". The classifier carries an
|
|
equivalent copy inline in its layout.css for the catalog. */
|
|
.seltable { display: flex; flex-direction: column; min-height: 0; height: 100%; }
|
|
.seltable__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
|
.seltable__count { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
|
|
.seltable__scroll { flex: 1; min-height: 0; overflow: auto; }
|
|
/* width:auto + nowrap cells → each column shrinks to fit its header/longest cell. */
|
|
.seltable__table { border-collapse: separate; border-spacing: 0; width: auto; font-size: 0.82rem; }
|
|
.seltable__table th, .seltable__table td { border-bottom: 1px solid var(--border); padding: 0.25rem 0.5rem; text-align: left; white-space: nowrap; }
|
|
.seltable__table thead th {
|
|
position: sticky; top: 0; z-index: 2; background: var(--bg-secondary, var(--bg));
|
|
color: var(--text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
|
|
}
|
|
.seltable__table thead tr.seltable__filters th { top: 1.55rem; padding: 0.15rem 0.35rem; }
|
|
.seltable__colfilter {
|
|
width: 100%; min-width: 2rem; box-sizing: border-box; padding: 0.15rem 0.35rem;
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|
background: var(--bg); color: var(--text); font-size: 0.74rem; font-weight: 400; text-transform: none; letter-spacing: 0;
|
|
}
|
|
.seltable__row { cursor: pointer; user-select: none; }
|
|
.seltable__row:hover { background: var(--bg-hover); }
|
|
.seltable__row.is-selected { background: var(--primary-light, rgba(37,99,235,0.12)); }
|
|
.seltable__row.is-selected:hover { background: var(--primary-light, rgba(37,99,235,0.18)); }
|
|
.seltable__row.drop-hover { outline: 2px solid var(--primary); outline-offset: -2px; }
|
|
|
|
/* ── "Add deliverables from archive" overlay (project MDL rollup) ─────────── */
|
|
.mdlarch-overlay {
|
|
position: fixed; inset: 0; z-index: 1000;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex; align-items: center; justify-content: center; padding: 1.5rem;
|
|
}
|
|
.mdlarch-overlay__box {
|
|
display: flex; flex-direction: column; min-height: 0;
|
|
width: min(960px, 95vw); height: min(80vh, 760px);
|
|
background: var(--bg); color: var(--text);
|
|
border: 1px solid var(--border); border-radius: var(--radius);
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
.mdlarch-overlay__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
|
.mdlarch-overlay__head h2 { margin: 0; font-size: 1.05rem; flex: 1; }
|
|
.mdlarch-overlay__close { border: none; background: none; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
|
|
.mdlarch-overlay__close:hover { color: var(--text); }
|
|
.mdlarch-overlay__status { padding: 0.5rem 1.1rem; color: var(--text-muted); font-size: 0.82rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
|
|
.mdlarch-overlay__table { flex: 1; min-height: 0; display: flex; }
|
|
.mdlarch-overlay__table .seltable { height: 100%; flex: 1; }
|
|
.mdlarch-overlay__foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--border); flex: 0 0 auto; }
|