feat(tableaux): scroll horizontal ergonomique + barre custom (#82)

- Barre de défilement JS orange (12px) injectée en haut de chaque
  .marches_table, collée avec position:sticky, masquée si le tableau
  tient dans le viewport
- Scroll contenu dans .dash-spreadsheet-container (overflow-x:hidden)
  → plus de scrollbar navigateur en bas de page
- Drag souris + tactile, clic sur le track, molette/trackpad
- Recalcul automatique au resize et aux re-renders Dash (MutationObserver)
- Test Selenium de non-régression (overflow-x:hidden sur le conteneur)

Sticky headers abandonnés (incompatibles avec scroll contenu).
Portée : 4 pages via la classe partagée .marches_table.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Colin Maudry
2026-06-23 20:12:47 +02:00
5 changed files with 712 additions and 0 deletions
+18
View File
@@ -0,0 +1,18 @@
from dash.testing.composite import DashComposite
def test_tableau_hscroll_bar_present(dash_duo: DashComposite):
"""La barre de défilement est injectée et le conteneur scroll horizontalement."""
from src.app import app
dash_duo.start_server(app)
dash_duo.wait_for_page(f"{dash_duo.server_url}/tableau")
dash_duo.wait_for_element(".marches_table", timeout=20)
# Barre injectée par table_hscroll.js
dash_duo.wait_for_element(".marches_table .dt-hscroll", timeout=10)
dash_duo.wait_for_element(".marches_table .dt-hscroll-thumb", timeout=5)
# Le conteneur Dash doit avoir overflow-x:hidden (scroll contenu, pas de scrollbar page)
container = dash_duo.find_element(".marches_table .dash-spreadsheet-container")
overflow = container.value_of_css_property("overflow-x")
assert overflow == "hidden"