From c8ed190cccf92d56bf46c364c64461cb30d71a22 Mon Sep 17 00:00:00 2001
From: iris <iris@pr1ma.darkest.space>
Date: Sun, 26 Jul 2026 17:20:48 +0200
Subject: [PATCH] fix(logs): log output scrolls internally instead of scrolling
 the page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #2720 (partial — logs scroll fix).

Make body.logs-shell a full-viewport flex column so the visible .logs-pane
fills the remaining height and .journal-output (already flex:1 overflow:auto)
scrolls its content. Also handle the AUDIT tab's <div> output the same way.
The tab bar and toolbar stay anchored at the top; only the log text scrolls.
---
 frontend/packages/dashboard/src/logs.css | 28 +++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/dashboard/src/logs.css b/frontend/packages/dashboard/src/logs.css
index 576c699d..2afd794e 100644
--- a/frontend/packages/dashboard/src/logs.css
+++ b/frontend/packages/dashboard/src/logs.css
@@ -5,6 +5,14 @@
 body.logs-shell {
   margin: 0;
   padding: 0;
+  /* Full-viewport flex column so the log pane can scroll internally
+     instead of the whole page scrolling. The sticky-top wrapper and
+     page-header shrink to their natural height; .logs-main takes the
+     rest and each visible .logs-pane fills it. */
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 /* Base tab styling now lives in @hive/shared/tabs.css (.hive-tab*). The
@@ -18,10 +26,28 @@ body.logs-shell {
 }
 
 .logs-main {
-  padding: 1.2em 1.5em 2em;
+  padding: 1.2em 1.5em 0;
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .logs-pane[hidden] { display: none; }
+.logs-pane {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 1.2em;
+}
+/* The AUDIT tab uses a <div> for its list instead of a <pre>, so give
+   it the same flex-grow + internal scroll that .journal-output already has. */
+#audit-list {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+}
 
 .logs-toolbar {
   display: flex;