diff --git a/generative/tests/test_dashboard_version_pdf_matrix.py b/generative/tests/test_dashboard_version_pdf_matrix.py index 67f8be8..adfc372 100644 --- a/generative/tests/test_dashboard_version_pdf_matrix.py +++ b/generative/tests/test_dashboard_version_pdf_matrix.py @@ -674,3 +674,23 @@ def test_html_pair_matrix_shows_version_cap_footnote(): block = _pairmatrix_js_block() assert "n_versions_dropped" in block assert "nicht gezeigt" in block + + +def test_html_pair_matrix_table_has_dedicated_scroll_wrapper(): + """Till-Live-Befund am gemergten #305: die Matrix (16 Spalten, ~1500px + Mindestbreite via nowrap/min-width) war oberhalb des 1200px-Breakpoints + nicht nach rechts scrollbar — die #203-P3-Media-Query gibt dort + `.table-wrap` auf overflow-x:visible frei (fuer Bestandstabellen korrekt, + die passen dann), `.app{overflow-x:clip}` schnitt den Matrix-Ueberlauf ab + (Repro 1440px: Wrapper 1162px, Tabelle 1497px, scrollLeft unbeweglich). + Fix: eigene `pm-scroll`-Wrapper-Klasse, die den Scroll-Container in ALLEN + Viewport-Breiten aktiv haelt.""" + from generative.eval_dashboard_server import _build_live_html + + html = _build_live_html() + # Markup: der Wrapper der Matrix-Tabelle traegt die pm-scroll-Klasse + section = html[html.index('id="s-pairmatrix"') : html.index('id="pm-table"')] + assert 'class="table-wrap pm-scroll"' in section + # CSS: Regel mit hoeherer Spezifitaet als die >=1200px-Freigabe + # (.table-wrap.pm-scroll schlaegt .table-wrap in der Media-Query) + assert ".table-wrap.pm-scroll" in html diff --git a/internal/dashboard/eval_dashboard.html b/internal/dashboard/eval_dashboard.html index af62f44..3c747ba 100644 --- a/internal/dashboard/eval_dashboard.html +++ b/internal/dashboard/eval_dashboard.html @@ -509,6 +509,31 @@ .good-t { color: var(--mint); } .bad-t { color: var(--coral); } .warn-t { color: var(--amber); } /* ── Versions×PDF-Paarvergleich-Matrix ──────────────────────────── */ +/* Till-Live-Befund am gemergten #305: die Matrix (16 Spalten, ~1500px + Mindestbreite via nowrap + .pm-cell min-width) war oberhalb des + 1200px-Breakpoints nicht nach rechts scrollbar — die #203-P3-Media-Query + oben gibt `.table-wrap` dort auf overflow-x:visible frei (fuer die + Bestandstabellen korrekt: die passen dann), `.app{overflow-x:clip}` + schnitt den Matrix-Ueberlauf ab (Repro 1440px: Wrapper 1162px, Tabelle + 1497px, scrollLeft unbeweglich). Eigene Wrapper-Klasse haelt den + Scroll-Container in ALLEN Viewport-Breiten aktiv — Spezifitaet (0,2,0) + schlaegt die Media-Query-Regel (0,1,0); der sticky-thead der Media-Query + entfaellt fuer die Matrix ohnehin (Scroll-Container waere sein + Containing-Block, #203-P3-Begruendung). */ +.table-wrap.pm-scroll { overflow-x: auto; overflow-y: hidden; } +/* Erste Spalte (PDF-Namen) beim Horizontal-Scroll fixiert — opaker + Card-Hintergrund, sonst schiebt sich der Zellinhalt beim Scrollen + sichtbar darunter durch. */ +.table-wrap.pm-scroll th:first-child, +.table-wrap.pm-scroll td:first-child { position: sticky; left: 0; background: var(--bg-card); z-index: 2; } +/* Die Zebra-/Hover-Overlays von table.cmp sind semi-transparent (rgba) — + in der sticky-Spalte scheinen sonst die darunter durchgescrollten Zellen + durch. Die Light-Zebra-Regel `body.light table.cmp ... td` (0,3,4) + schlaegt die Regel oben (0,3,1), darum hier mit hoeherer Spezifitaet + (0,5,4) opak halten. Bewusster Trade-off: der 1,5–3,5%-Tint (Zebra/Hover) + entfaellt nur in dieser einen Spalte. */ +.table-wrap.pm-scroll table.cmp tbody tr:nth-child(even) td:first-child, +.table-wrap.pm-scroll table.cmp tbody tr:hover td:first-child { background: var(--bg-card); } table.pm-matrix td, table.pm-matrix th { padding: 9px 12px; } table.pm-matrix td.pdf { white-space: nowrap; } .pm-cell { text-align: center; min-width: 74px; line-height: 1.35; } @@ -1013,7 +1038,9 @@
-| Wird geladen… |