tabs: logs flyout fills the side-panel height (closes #541)
The journald viewer opens in the side panel, but the <pre> only takes
the height of its content — so a short log fetch leaves the bottom 80%
of the panel empty, and a long one pushes the controls past the
viewport. Wrap the body in a column-flex container that fills the
side-panel-body, keep controls fixed at the top, and let the <pre>
flex-grow into the rest of the panel with its own overflow:
.journal-body { display: flex; flex-direction: column; height: 100%; }
.journal-controls { flex: 0 0 auto; }
.journal-output { flex: 1 1 0; min-height: 0; overflow: auto; }
`min-height: 0` is the canonical "let me actually flex-shrink for
overflow" escape hatch on flex children. Also moved the auto-scroll
target from side-panel-body onto the <pre> itself — the panel-body no
longer overflows now that journal-body fills it; the <pre> is the new
scroll surface.
Pure CSS + one JS line; no DOM shape change.
This commit is contained in:
parent
2d9109d1bd
commit
8bbb3e4905
2 changed files with 25 additions and 6 deletions
|
|
@ -946,9 +946,12 @@ window.marked = marked;
|
|||
pre.textContent = 'error: ' + resp.status + '\n' + text;
|
||||
} else {
|
||||
pre.textContent = text || '(empty)';
|
||||
// Auto-scroll the panel to the newest lines on fresh fetch.
|
||||
const sb = $('side-panel-body');
|
||||
if (sb) sb.scrollTop = sb.scrollHeight;
|
||||
// Auto-scroll to the newest lines on fresh fetch. #541
|
||||
// moved the scroll surface from side-panel-body onto the
|
||||
// <pre> itself (the panel-body now fills the viewport and
|
||||
// the <pre> is the inner overflow container), so scroll
|
||||
// the <pre> instead of the side-panel-body.
|
||||
pre.scrollTop = pre.scrollHeight;
|
||||
}
|
||||
} catch (err) {
|
||||
pre.textContent = 'fetch failed: ' + err;
|
||||
|
|
|
|||
Loading…
Reference in a new issue