From 8bbb3e49056ff3c3ed9c8a644b00c6b72ecd581c Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Thu, 28 May 2026 18:54:02 +0200
Subject: [PATCH] tabs: logs flyout fills the side-panel height (closes #541)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/packages/dashboard/src/dashboard.css | 22 ++++++++++++++++---
 frontend/packages/dashboard/src/tabs.js       |  9 +++++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index deaa7e71..0c3231a9 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -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;
diff --git a/frontend/packages/dashboard/src/tabs.js b/frontend/packages/dashboard/src/tabs.js
index e220b423..aa46c5d2 100644
--- a/frontend/packages/dashboard/src/tabs.js
+++ b/frontend/packages/dashboard/src/tabs.js
@@ -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;