From 806a817c07607302aa8d90689ec56ad09d1b09df Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 14:38:15 +0200
Subject: [PATCH] fix(ui): suppress double scrollbar in log + timeline panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LogViewer and EventFeed each apply overflow-y:auto to their root
container, which produced a nested scrollbar inside the
InfiniteScrollArea that also scrolls. A flatScroll override class
flattens the DS component so the outer InfiniteScrollArea owns the
single scrollbar — matching the IntersectionObserver sentinels that
drive infinite-load.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.tsx     |  4 ++--
 ui/src/pages/AgentInstance/AgentInstance.tsx |  4 ++--
 ui/src/styles/log-panel.module.css           | 10 ++++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index dbc2775c..674d375b 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -966,7 +966,7 @@ export default function AgentHealth() {
             maxHeight={360}
           >
             {filteredLogs.length > 0 ? (
-              <LogViewer entries={filteredLogs} />
+              <LogViewer entries={filteredLogs} className={logStyles.flatScroll} />
             ) : (
               <div className={logStyles.logEmpty}>
                 {logSearch || logLevels.size > 0 || logSources.size > 0
@@ -1004,7 +1004,7 @@ export default function AgentHealth() {
             maxHeight={360}
           >
             {feedEvents.length > 0 ? (
-              <EventFeed events={feedEvents} />
+              <EventFeed events={feedEvents} className={logStyles.flatScroll} />
             ) : (
               <div className={logStyles.logEmpty}>
                 {eventStream.isLoading ? 'Loading events\u2026' : 'No events in the selected time range.'}
diff --git a/ui/src/pages/AgentInstance/AgentInstance.tsx b/ui/src/pages/AgentInstance/AgentInstance.tsx
index 87a4fdc4..ca53c900 100644
--- a/ui/src/pages/AgentInstance/AgentInstance.tsx
+++ b/ui/src/pages/AgentInstance/AgentInstance.tsx
@@ -472,7 +472,7 @@ export default function AgentInstance() {
             maxHeight={360}
           >
             {filteredLogs.length > 0 ? (
-              <LogViewer entries={filteredLogs} />
+              <LogViewer entries={filteredLogs} className={logStyles.flatScroll} />
             ) : (
               <div className={logStyles.logEmpty}>
                 {logSearch || logLevels.size > 0 || logSources.size > 0
@@ -510,7 +510,7 @@ export default function AgentInstance() {
             maxHeight={360}
           >
             {feedEvents.length > 0 ? (
-              <EventFeed events={feedEvents} />
+              <EventFeed events={feedEvents} className={logStyles.flatScroll} />
             ) : (
               <div className={logStyles.logEmpty}>
                 {eventStream.isLoading ? 'Loading events…' : 'No events in the selected time range.'}
diff --git a/ui/src/styles/log-panel.module.css b/ui/src/styles/log-panel.module.css
index 4bc2b69f..ddcc114e 100644
--- a/ui/src/styles/log-panel.module.css
+++ b/ui/src/styles/log-panel.module.css
@@ -9,6 +9,16 @@
   max-height: 420px;
 }
 
+/*
+ * Flatten the internal scroll of @cameleer/design-system's LogViewer and
+ * EventFeed so their containing InfiniteScrollArea owns the scroll — one
+ * scrollbar per panel, IntersectionObserver sentinels stay meaningful.
+ */
+.flatScroll {
+  overflow: visible !important;
+  max-height: none !important;
+}
+
 .logHeader {
   display: flex;
   align-items: center;