From 06a358943e6131dee011a9f0f769fd2c6e824e25 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Wed, 20 May 2026 23:00:16 +0200
Subject: [PATCH] feat(server-detail): pin Console-modal transcript on
 modal:opened

The console-modal transcript was not autoscrolled to the bottom on open
because tabs.js called dlg.showModal() directly, bypassing modals.js's
openInline() which dispatches the modal:opened CustomEvent. Fixed by
routing the expand-button open through window.modals.openInline() when
available.

Added inline script in server_detail.html that listens for modal:opened
on #console-modal and calls scrollAutoscrollTargets via requestAnimationFrame
so the browser has committed dialog layout before scrollHeight is read.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 l4d2web/l4d2web/static/js/tabs.js            |  8 ++++++--
 l4d2web/l4d2web/templates/server_detail.html | 21 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/l4d2web/l4d2web/static/js/tabs.js b/l4d2web/l4d2web/static/js/tabs.js
index 00df844..9171027 100644
--- a/l4d2web/l4d2web/static/js/tabs.js
+++ b/l4d2web/l4d2web/static/js/tabs.js
@@ -54,8 +54,12 @@
           const name = strip.dataset.activeTab;
           if (!name) return;
           const dlg = document.getElementById(`${name}-modal`);
-          if (dlg && typeof dlg.showModal === "function" && !dlg.open) {
-            dlg.showModal();
+          if (dlg && !dlg.open) {
+            if (window.modals && typeof window.modals.openInline === "function") {
+              window.modals.openInline(dlg);
+            } else if (typeof dlg.showModal === "function") {
+              dlg.showModal();
+            }
           }
         });
       }
diff --git a/l4d2web/l4d2web/templates/server_detail.html b/l4d2web/l4d2web/templates/server_detail.html
index a8e95c9..2232f94 100644
--- a/l4d2web/l4d2web/templates/server_detail.html
+++ b/l4d2web/l4d2web/templates/server_detail.html
@@ -211,4 +211,25 @@
     </form>
   </div>
 </dialog>
+
+<script>
+  // Pin the Console modal transcript to its bottom each time the modal
+  // opens. While the <dialog> is closed, its descendants have scrollHeight=0,
+  // so neither the page-load autoscroll nor htmx:load can anchor them.
+  // The 'modal:opened' CustomEvent is dispatched by modals.js on
+  // dialog.showModal().
+  (() => {
+    const dlg = document.getElementById("console-modal");
+    if (!dlg) return;
+    dlg.addEventListener("modal:opened", () => {
+      // Defer one rAF so the browser commits the dialog layout before we
+      // read scrollHeight and set scrollTop (otherwise both are still 0).
+      requestAnimationFrame(() => {
+        if (window.scrollAutoscrollTargets) {
+          window.scrollAutoscrollTargets(dlg);
+        }
+      });
+    });
+  })();
+</script>
 {% endblock %}