cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(server-detail): pin transcripts/logs to bottom on tab activation

Browse source 
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>
This commit is contained in:
mwiegand 2026-05-20 22:52:28 +02:00
parent 02e44a04d3
commit c50b6bff29
No known key found for this signature in database
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
l4d2web/l4d2web/static/js/tabs.js
View file

@ -16,6 +16,14 @@
p.hidden = p.dataset.tab !== name; p.hidden = p.dataset.tab !== name;
}); });
strip.dataset.activeTab = 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) { function activeTabName(strip) {

6
l4d2web/l4d2web/templates/server_detail.html
View file

@ -58,7 +58,7 @@
</div> </div>
<div role="tabpanel" data-tab="log" class="tab-pane"> <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>
<div role="tabpanel" data-tab="console" class="tab-pane" hidden> <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> <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
</div> </div>
<div class="modal-body"> <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> </div>
</dialog> </dialog>
@ -156,7 +156,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
{% if latest_job %} {% 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> <p><a href="/jobs/{{ latest_job.id }}">open full job →</a></p>
{% else %} {% else %}
<p class="muted">No job has run for this server yet.</p> <p class="muted">No job has run for this server yet.</p>