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

feat(server-detail): pin Console-modal transcript on modal:opened

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

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

@ -54,9 +54,13 @@
const name = strip.dataset.activeTab; const name = strip.dataset.activeTab;
if (!name) return; if (!name) return;
const dlg = document.getElementById(`${name}-modal`); const dlg = document.getElementById(`${name}-modal`);
if (dlg && typeof dlg.showModal === "function" && !dlg.open) { if (dlg && !dlg.open) {
if (window.modals && typeof window.modals.openInline === "function") {
window.modals.openInline(dlg);
} else if (typeof dlg.showModal === "function") {
dlg.showModal(); dlg.showModal();
} }
}
}); });
} }
}); });

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

@ -211,4 +211,25 @@
</form> </form>
</div> </div>
</dialog> </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 %} {% endblock %}