fix(modals): nested-dialog rendering, CM6 destroy on close, mount idempotency

Three coupled lifecycle bugs surfaced during Task 5-8 reviews:

1. overlay_file_editor.html emitted a <dialog open> that nested inside
   the outer <dialog id="modal-container">, collapsing the modal to
   2px tall. Replaced with <div role="document" aria-labelledby="…">
   so a11y semantics survive and the layout actually renders.
2. modal-router.js's close-event handler now tears down CM6 controllers
   via controller.destroy() and clears #modal-content innerHTML, fixing
   a real leak (each open/close cycle was orphaning an EditorView and
   a matchMedia "change" listener on window).
3. mountOne in editor.js now short-circuits if the textarea already has
   a controller, defending against future double-mount paths.

CSS: added div.modal and div.modal.modal-wide selectors alongside the
existing dialog.modal ones so the editor <div> gets correct styling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

l4d2web/l4d2web/static/css/components.css

@@ -111,7 +111,8 @@ a.button.danger {
   max-width: 28rem;
 }
 
-dialog.modal {
+dialog.modal,
+div.modal {
   background: var(--color-surface);
   color: var(--color-text);
   border: var(--line);
@@ -659,7 +660,8 @@ button.danger-outline:hover {
 }
 
 /* Wider modal for the editor (textarea needs the breathing room). */
-dialog.modal.modal-wide {
+dialog.modal.modal-wide,
+div.modal.modal-wide {
   width: min(48rem, 92vw);
 }
 

l4d2web/l4d2web/static/js/editor.js

@@ -41,6 +41,7 @@
   }
 
   async function mountOne(textarea) {
+    if (textarea.__editorController) return;  // idempotency: don't double-mount
     let lang = textarea.getAttribute("data-editor-language") || "plain";
     let filenameInput = null;
     let dropdown = null;

l4d2web/l4d2web/static/js/modal-router.js

@@ -54,6 +54,21 @@
         url.searchParams.delete("modal");
         history.pushState({}, "", url.toString());
       }
+      // Tear down any CM6 controllers attached to swapped-in editor textareas
+      // so close/reopen cycles don't leak EditorView instances and matchMedia
+      // listeners. The bundle exposes controller.destroy() on the controller
+      // stored at textarea.__editorController.
+      const slot = document.getElementById("modal-content");
+      if (slot) {
+        for (const ta of slot.querySelectorAll("textarea[data-editor-language]")) {
+          const ctrl = ta.__editorController;
+          if (ctrl && typeof ctrl.destroy === "function") {
+            ctrl.destroy();
+          }
+          ta.__editorController = null;
+        }
+        slot.innerHTML = "";
+      }
     });
 
     // Esc key fires 'cancel' on a <dialog>; preventDefault so we control the

l4d2web/l4d2web/templates/overlay_file_editor.html

@@ -2,7 +2,7 @@
 {% block title %}Edit {{ rel_path }} · {{ overlay.name }}{% endblock %}
 {% block extra_head %}{% include "_editor_assets.html" %}{% endblock %}
 {% block content %}
-<dialog id="files-editor-modal" class="modal modal-wide" open aria-labelledby="files-editor-title">
+<div id="files-editor-modal" class="modal modal-wide" role="document" aria-labelledby="files-editor-title">
   <div class="modal-header">
     <h2 id="files-editor-title" class="files-editor-path">
       <span class="files-editor-title-text">{{ rel_path }}</span>
@@ -43,5 +43,5 @@
     <button type="button" class="button-secondary" data-modal-dismiss>Cancel</button>
     <button type="button" class="files-editor-save">Save</button>
   </div>
-</dialog>
+</div>
 {% endblock %}