iarv/mc-webui
1
0
Fork 1
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-05-08 22:34:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): jump to latest when modal opens

Browse Source 
The console iframe lives inside a Bootstrap modal that is hidden on page load. While the modal is hidden the messages container has 0 height, so the scrollToBottom() that runs after loadOutputHistory() is a no-op. When the modal opens the container resizes to its real height but stays scrolled to the top.

Watch the container with a ResizeObserver and scroll to the bottom whenever its height transitions from 0 to non-zero, so the transcript opens at the latest entry on first show and on every reopen.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-05-06 07:55:23 +02:00
parent a571d5388d
commit 8f144c6e97
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/js/console.js
+16 -1
View File
@@ -509,7 +509,9 @@ function setupClearOutputButton() {
/**
* Wire the floating scroll-to-bottom button: visible when the user has
* scrolled away from the bottom of the transcript.
* scrolled away from the bottom of the transcript. Also auto-scrolls to
* the bottom whenever the container transitions from hidden (0 height,
* e.g. inside a closed Bootstrap modal) to visible.
*/
function setupScrollToBottom() {
const container = document.getElementById('consoleMessages');
@@ -530,4 +532,17 @@ function setupScrollToBottom() {
e.preventDefault();
container.scrollTop = container.scrollHeight;
});
// When the modal hosting this iframe opens, the container goes from
// 0 height to its real height. Jump to the latest entry on that edge.
let wasVisible = container.clientHeight > 0;
const ro = new ResizeObserver(() => {
const isVisible = container.clientHeight > 0;
if (isVisible && !wasVisible) {
container.scrollTop = container.scrollHeight;
}
wasVisible = isVisible;
update();
});
ro.observe(container);
}