From 91b03a023d2ee7a8926151e2e7017a9ccb732e25 Mon Sep 17 00:00:00 2001 From: TillQuandel Date: Thu, 16 Jul 2026 00:01:46 +0200 Subject: [PATCH] =?UTF-8?q?fix(dashboard):=20Versions=C3=97PDF-Matrix=20ho?= =?UTF-8?q?rizontal=20scrollbar=20machen=20(Till-Live-Befund)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Till-Live-Befund am gemergten #305 (master 477eb07): in der Matrix liess sich nicht ganz nach rechts scrollen — bei voller Versionszahl (15 Spalten + PDF-Spalte, ~1500px Mindestbreite via nowrap/min-width) waren die hinteren Versionen nicht erreichbar. Ursache (Repro VOR dem Fix, Playwright/firefox-1532, echte Datenkopie): Die Matrix steckt zwar im etablierten .table-wrap (overflow-x:auto), aber die #203-P3-Media-Query gibt .table-wrap oberhalb 1200px auf overflow-x:visible frei — fuer die Bestandstabellen korrekt (die passen dort ohne Scroll, dafuer sticky-thead), fuer die Matrix nie. Der Ueberlauf wurde von .app{overflow-x:clip} abgeschnitten. Messwerte 1440px: Wrapper 1162px, Tabelle 1497px, letzte Spalte v0.3.143 endet bei x=1746 (ausserhalb Viewport), scrollLeft unbeweglich. 1280px analog. Unter 1200px griff der Basis-Wrapper (auto) und es war scrollbar — deshalb fiel es in der 1440px-Sichtpruefung von #305 nicht auf (Messfehler dort: nur Dropdown- Klicks, kein Scroll-Versuch in der Matrix selbst). Fix (minimal, nur die Matrix — #203-Bestand unangetastet): - Wrapper-Klasse pm-scroll: .table-wrap.pm-scroll { overflow-x:auto } haelt den Scroll-Container in ALLEN Viewport-Breiten aktiv (Spezifitaet (0,2,0) schlaegt die Media-Query-Regel (0,1,0)). - Nice-to-have (trivial geblieben): erste Spalte (PDF-Namen) sticky (left:0, opaker var(--bg-card)-Hintergrund, z-index:2). Erste Iteration hatte ein Light-Theme-Artefakt: die body.light-Zebra-Regel (0,3,4) schlug die sticky-Regel (0,3,1) und legte semi-transparentes rgba ueber die Spalte — durchgescrollte Zellen schienen in even-Zeilen durch (Screenshot-Beleg). Behoben ueber gezielte Opak-Override-Regel (0,5,4) fuer Zebra+Hover in genau dieser Spalte; Trade-off (kein Zebra/Hover-Tint in der ersten Spalte) im CSS-Kommentar dokumentiert. - Delta-Tabelle des Paarvergleichs NICHT angefasst: Repro zeigte kein Problem (width:100%, wrappt; >=1200 passt sie, <1200 greift der Basis-Wrapper). Verifikation NACH dem Fix (aktives Scrollen via scrollLeft, hell+dunkel, 1440/1280/1100px): letzte Spalte v0.3.143 in allen Konstellationen voll sichtbar (scrollLeft==maxScroll, lastColFullyVisible=true), sticky-Spalte opak ohne Durchschein-Artefakte, 0 Page-Errors. Screenshots C:/tmp/pairview-verify/hscroll-{repro,nachher}-*.png. Tests: 1 neuer HTML-Anker-Test (RED verifiziert: pm-scroll-Klasse fehlte), Muster test_dashboard_agent_stats_empty_message (_build_live_html, nie bash grep/sed wegen NUL-Byte). NUL-Byte-Check nach jedem HTML-Edit: 1 (unveraendert). Volle Suite: 6028 passed, 3 skipped. ruff check + format: clean. --- .../test_dashboard_version_pdf_matrix.py | 20 +++++++++++++ internal/dashboard/eval_dashboard.html | 29 ++++++++++++++++++- 2 files changed, 48 insertions(+), 1 deletion(-) 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…