From c50b6bff296460047f649c42cd4e8281c02b3ba4 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Wed, 20 May 2026 22:52:28 +0200
Subject: [PATCH] feat(server-detail): pin transcripts/logs to bottom on tab
 activation

Call scrollAutoscrollTargets on the newly-visible pane when a tab is
activated, so console transcripts and log streams scroll to the bottom
after being revealed (their scrollHeight was 0 while hidden). Also adds
data-autoscroll to the three log-stream <pre> elements so they
participate in the same anchor logic.

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 | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/l4d2web/l4d2web/static/js/tabs.js b/l4d2web/l4d2web/static/js/tabs.js
index 619b5b8..00df844 100644
--- a/l4d2web/l4d2web/static/js/tabs.js
+++ b/l4d2web/l4d2web/static/js/tabs.js
@@ -16,6 +16,14 @@
       p.hidden = p.dataset.tab !== name;
     });
     strip.dataset.activeTab = name;
+
+    // Pin any scroll-locked regions (log streams, console transcripts) in
+    // the newly-visible pane to the bottom. While the pane was hidden,
+    // their scrollHeight was 0 so previous appends couldn't anchor.
+    const activePane = strip.querySelector('[role="tabpanel"]:not([hidden])');
+    if (activePane && window.scrollAutoscrollTargets) {
+      window.scrollAutoscrollTargets(activePane);
+    }
   }
 
   function activeTabName(strip) {
diff --git a/l4d2web/l4d2web/templates/server_detail.html b/l4d2web/l4d2web/templates/server_detail.html
index f0fa421..a8e95c9 100644
--- a/l4d2web/l4d2web/templates/server_detail.html
+++ b/l4d2web/l4d2web/templates/server_detail.html
@@ -58,7 +58,7 @@
   </div>
 
   <div role="tabpanel" data-tab="log" class="tab-pane">
-    <pre class="log-stream" data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
+    <pre class="log-stream" data-autoscroll data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
   </div>
 
   <div role="tabpanel" data-tab="console" class="tab-pane" hidden>
@@ -98,7 +98,7 @@
     <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
   </div>
   <div class="modal-body">
-    <pre class="log-stream tall" data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
+    <pre class="log-stream tall" data-autoscroll data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
   </div>
 </dialog>
 
@@ -156,7 +156,7 @@
   </div>
   <div class="modal-body">
     {% if latest_job %}
-      <pre class="log-stream tall" data-sse-url="/jobs/{{ latest_job.id }}/stream"></pre>
+      <pre class="log-stream tall" data-autoscroll data-sse-url="/jobs/{{ latest_job.id }}/stream"></pre>
       <p><a href="/jobs/{{ latest_job.id }}">open full job →</a></p>
     {% else %}
       <p class="muted">No job has run for this server yet.</p>