exl100

commit 497c1defe31d3b3bdeeea70e2bcedf13fb54a3e0
parent ece27b18ee7401946a74e083d011685175ac3fb6
Author: Jean Schurger <jean@schurger.org>
Date:   Thu,  5 Nov 2026 12:27:12 -0500

Page : modale Programmes plus large (filtres sur une ligne) + croix à droite

#modal élargi à min(960px, 96vw) pour que les 8 puces de filtre tiennent sur une
seule ligne. La croix de fermeture passe à droite (margin-left:auto sur .modal-head
.x), visible surtout dans la modale Exelmémoire. Test modal-shot.mjs.

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

Diffstat:
A
test/modal-shot.mjs
 | 
19
+++++++++++++++++++
M
web/shell.html.in
 | 
3
++-

2 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/test/modal-shot.mjs b/test/modal-shot.mjs
@@ -0,0 +1,19 @@
+// Ouvre une modale et capture, pour vérifier la mise en page (filtres sur une ligne, croix à droite).
+//   node test/modal-shot.mjs <programmes|exelmemoire> [url] [capture.png]
+import { open, sleep } from './cdp.mjs';
+const which = process.argv[2] ?? 'programmes';
+const url = process.argv[3] ?? 'http://127.0.0.1:8195/';
+const shot = process.argv[4] ?? '/tmp/modal.png';
+const page = await open(url, { width: 1100, height: 1200 });
+await sleep(7000);
+await page.evaluate(which === 'exelmemoire' ? "document.getElementById('cram-open').click()" : "document.getElementById('pick').click()");
+await sleep(500);
+const chipLines = await page.evaluate(`(() => {
+  const chips = [...document.querySelectorAll('#chips .chip')];
+  const tops = new Set(chips.map((c) => c.getBoundingClientRect().top));
+  return { chips: chips.length, lines: tops.size };
+})()`).catch(() => null);
+if (chipLines) console.log('filtres :', JSON.stringify(chipLines));
+await page.screenshot(shot);
+console.log('Capture :', shot);
+page.close();
diff --git a/web/shell.html.in b/web/shell.html.in
@@ -80,7 +80,8 @@
   .modal-head strong { font-size: 1.05rem; }
   .modal-head #filter { flex: 1; background: #2b2d35; color: #fff; border: 1px solid #40434e;
     border-radius: 6px; padding: 6px 10px; font: inherit; font-size: .9rem; min-width: 0; }
-  .modal-head .x { background: none; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 2px 6px; }
+  .modal-head .x { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; padding: 2px 6px; }
+  #modal { width: min(960px, 96vw); }   /* Programmes : assez large pour une seule ligne de filtres */
   .modal-head .x:hover { color: #fff; }
   .modal-src { margin: 0; padding: 9px 14px; border-top: 1px solid #2a2c33; background: #1b1d22;
     color: var(--muted); font-size: .8rem; }