vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tabs: logs flyout fills the side-panel height (closes #541)

Browse source 
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:
iris 2026-05-28 18:54:02 +02:00
commit 8bbb3e4905
2 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/packages/dashboard/src/dashboard.css
View file

@ -450,11 +450,21 @@ a:hover {
.container-row.tombstone .name { color: var(--muted); }
/* Per-container journald viewer + applied-config viewer. Both open
in the side panel and lazy-fetch on open; output is monospace
inside a bordered <pre>, controls (unit select + refresh) above. */
inside a bordered <pre>, controls (unit select + refresh) above.
#541: the panel-body wrapper is a column flex container that fills
the side-panel-body so the <pre> can flex-grow into a single tall
scrollable surface instead of a short box at the top with the rest
of the panel empty. */
.journal-body {
display: flex;
flex-direction: column;
height: 100%;
gap: 0.4em;
}
.journal-controls {
flex: 0 0 auto;
display: flex;
gap: 0.5em;
margin-bottom: 0.4em;
align-items: center;
}
.journal-unit {
@ -472,7 +482,13 @@ a:hover {
color: var(--fg);
border: 1px solid var(--purple-dim);
padding: 0.5em 0.7em;
overflow-x: auto;
/* #541: take all leftover panel height + scroll inside the pre so
long log fetches don't push the controls off-screen. `min-height:
0` is the canonical "let me actually flex-shrink for overflow"
escape hatch on flex children. */
flex: 1 1 0;
min-height: 0;
overflow: auto;
font-size: 0.85em;
line-height: 1.4;
white-space: pre;

9
frontend/packages/dashboard/src/tabs.js
View file

@ -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;