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;