exl100

commit 80f9591301c79d03987a5c677c933431623fd013
parent cbd1d1d98f22b1e12657be4c4799ea92647dcbb0
Author: Jean Schurger <jean@schurger.org>
Date:   Thu,  5 Nov 2026 15:51:53 -0500

Modales Exelmémoire / Disquette : le corps défile, la page derrière est verrouillée

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QyJB9yqUAYm3wRQi4uytj9

Diffstat:
A
test/modal-scroll.mjs
 | 
16
++++++++++++++++
M
web/shell.html.in
 | 
6
+++++-

2 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/test/modal-scroll.mjs b/test/modal-scroll.mjs
@@ -0,0 +1,16 @@
+// La modale Disquette défile elle-même et ne fait pas défiler la page derrière.
+//   node test/modal-scroll.mjs [base-url]
+import { open, sleep } from './cdp.mjs';
+const base = process.argv[2] ?? 'http://127.0.0.1:8196';
+const page = await open(base + '/', { width: 900, height: 700 });
+await page.evaluate('location.reload()');
+await sleep(7000);
+await page.evaluate(`[...document.querySelectorAll('.pg')].find((b) => b.dataset.type === 'disk' && b.dataset.search.includes('loadrun')).click()`);
+await sleep(2500);
+const before = await page.evaluate("({ open: document.getElementById('disk-modal').open, pageY: scrollY, bodyTop: document.querySelector('#disk-modal .cram-body').scrollTop, bodyH: document.querySelector('#disk-modal .cram-body').clientHeight, scrollH: document.querySelector('#disk-modal .cram-body').scrollHeight })");
+console.log('avant :', JSON.stringify(before));
+await page.send('Input.dispatchMouseEvent', { type: 'mouseWheel', x: 450, y: 400, deltaX: 0, deltaY: 600 });
+await sleep(600);
+const after = await page.evaluate("({ pageY: scrollY, bodyTop: document.querySelector('#disk-modal .cram-body').scrollTop })");
+console.log('après molette :', JSON.stringify(after), after.bodyTop > 0 && after.pageY === before.pageY ? '=> la modale défile, pas la page' : '=> PROBLÈME');
+page.close();
diff --git a/web/shell.html.in b/web/shell.html.in
@@ -96,7 +96,11 @@
   .chip.active { background: var(--cyan); color: #06282a; border-color: var(--cyan); font-weight: 600; }
   /* Le défilement reste dans la liste (pas de chaînage vers la page) */
   .programs { max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; background: #17181c; }
-  .modal { overscroll-behavior: contain; }
+  .modal { overscroll-behavior: contain; display: flex; flex-direction: column; }
+  .modal[open] { display: flex; }
+  /* Corps des modales Exelmémoire / Disquette : c'est lui qui défile, pas la page derrière. */
+  .cram-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
+  body:has(dialog[open]) { overflow: hidden; }
   .pg-group { position: sticky; top: 0; background: #1b1d22; color: var(--cyan); font-size: .78rem;
     letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-bottom: 1px solid #2a2c33; }
   .pg { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%;