fix(dashboard): Versions×PDF-Matrix horizontal scrollbar machen (Till-Live-Befund)

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

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 @@
     <p class="insight" id="ins-pairmatrix"></p>
     <div class="insight" id="pm-archived-note" style="border-left-color:var(--ink-4)" hidden></div>
 
-    <div class="table-wrap">
+    <!-- pm-scroll: eigener, IMMER aktiver Scroll-Container (16 Spalten passen
+         in keiner Viewport-Breite — s. CSS-Kommentar an .table-wrap.pm-scroll) -->
+    <div class="table-wrap pm-scroll">
       <table class="cmp pm-matrix" id="pm-table">
         <thead><tr id="pm-thead"></tr></thead>
         <tbody id="pm-body"><tr><td style="padding:2rem;text-align:center;color:var(--ink-4);font-family:var(--f-mono);font-size:12px">Wird geladen…</td></tr></tbody>