From 56afe77bd4b84067e9b1fd046b2135ea593004a3 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Thu, 24 Sep 2026 09:35:20 +0200
Subject: [PATCH] =?UTF-8?q?Corrige=20la=20modale=20"Utiliser=20un=20mod?=
 =?UTF-8?q?=C3=A8le"=20:=20fond=20transparent=20et=20aper=C3=A7u=20minuscu?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deux bugs distincts :
- #docTemplateModal n'était jamais ajoutée au sélecteur qui définit les
  tokens --doc-* (--doc-bg-2/--doc-border/--doc-text/...) — ces tokens
  n'existaient nulle part sur elle, donc toutes les couleurs de fond de
  la modale résolvaient à rien (transparence totale). Corrigé en
  l'ajoutant à ce sélecteur (et au data-theme posé par
  forgeDocApplyTheme, pour suivre le thème clair/sombre de l'éditeur).
- .docModalDialog--wide n'avait qu'un max-height, jamais un height
  explicite : le dialogue flex se limitait à la hauteur naturelle de
  son contenu, et l'iframe d'aperçu (flex:1) retombait à sa hauteur
  intrinsèque minuscule faute de référence pour se déployer.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/document/document-editor.css   | 18 +++++++++++++++---
 static/document/js/document-editor.js |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/static/document/document-editor.css b/static/document/document-editor.css
index d1275d0e..352a2587 100644
--- a/static/document/document-editor.css
+++ b/static/document/document-editor.css
@@ -34,7 +34,8 @@ body.objectEditBody > main.content {
    forgeDocApplyTheme (static/document/js/document-editor.js), qui pose
    le même data-theme sur les deux éléments. */
 .docEditor3,
-#docScenarioTreeModal {
+#docScenarioTreeModal,
+#docTemplateModal {
   --doc-bg: var(--forge-bg);
   --doc-bg-2: var(--forge-bg-secondary);
   --doc-card: var(--forge-card);
@@ -72,7 +73,8 @@ body.objectEditBody > main.content {
 }
 
 .docEditor3[data-theme="light"],
-#docScenarioTreeModal[data-theme="light"] {
+#docScenarioTreeModal[data-theme="light"],
+#docTemplateModal[data-theme="light"] {
   --doc-bg: #f6f5f2;
   --doc-bg-2: #fff;
   --doc-card: #fff;
@@ -89,7 +91,8 @@ body.objectEditBody > main.content {
 }
 
 .docEditor3 *,
-#docScenarioTreeModal * {
+#docScenarioTreeModal *,
+#docTemplateModal * {
   box-sizing: border-box;
 }
 
@@ -2286,6 +2289,15 @@ img.docImage {
    la place à l'aperçu. ---- */
 .docModalDialog--wide {
   width: min(980px, 95vw);
+
+  /* height explicite, pas seulement max-height (comme la base
+     .docModalDialog) : sans elle, le dialogue flex se limite à la
+     hauteur naturelle de son contenu et l'iframe d'aperçu (flex:1 dans
+     .docTemplatePreviewPane) n'a plus aucune hauteur de référence pour
+     se déployer — elle retombe à sa hauteur intrinsèque minuscule (bug
+     réel constaté le 24/09/2026, capture à l'appui : "container trop
+     petit"). */
+  height: min(85vh, 760px);
   max-height: min(85vh, 760px);
 }
 
diff --git a/static/document/js/document-editor.js b/static/document/js/document-editor.js
index 439fbd60..ea4f9b90 100644
--- a/static/document/js/document-editor.js
+++ b/static/document/js/document-editor.js
@@ -3045,6 +3045,8 @@ function forgeDocApplyTheme(theme) {
   // posé ici explicitement pour que la modale suive le même thème.
   const scenarioModal = document.getElementById('docScenarioTreeModal');
   if (scenarioModal) scenarioModal.dataset.theme = theme;
+  const templateModal = document.getElementById('docTemplateModal');
+  if (templateModal) templateModal.dataset.theme = theme;
   const toggle = document.getElementById('docThemeToggle');
   toggle.innerHTML = theme === 'light'
     ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z"/></svg>'