fix(ui): suppress double scrollbar in log + timeline panels
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>
This commit is contained in:
@@ -966,7 +966,7 @@ export default function AgentHealth() {
|
|||||||
maxHeight={360}
|
maxHeight={360}
|
||||||
>
|
>
|
||||||
{filteredLogs.length > 0 ? (
|
{filteredLogs.length > 0 ? (
|
||||||
<LogViewer entries={filteredLogs} />
|
<LogViewer entries={filteredLogs} className={logStyles.flatScroll} />
|
||||||
) : (
|
) : (
|
||||||
<div className={logStyles.logEmpty}>
|
<div className={logStyles.logEmpty}>
|
||||||
{logSearch || logLevels.size > 0 || logSources.size > 0
|
{logSearch || logLevels.size > 0 || logSources.size > 0
|
||||||
@@ -1004,7 +1004,7 @@ export default function AgentHealth() {
|
|||||||
maxHeight={360}
|
maxHeight={360}
|
||||||
>
|
>
|
||||||
{feedEvents.length > 0 ? (
|
{feedEvents.length > 0 ? (
|
||||||
<EventFeed events={feedEvents} />
|
<EventFeed events={feedEvents} className={logStyles.flatScroll} />
|
||||||
) : (
|
) : (
|
||||||
<div className={logStyles.logEmpty}>
|
<div className={logStyles.logEmpty}>
|
||||||
{eventStream.isLoading ? 'Loading events\u2026' : 'No events in the selected time range.'}
|
{eventStream.isLoading ? 'Loading events\u2026' : 'No events in the selected time range.'}
|
||||||
|
|||||||
@@ -472,7 +472,7 @@ export default function AgentInstance() {
|
|||||||
maxHeight={360}
|
maxHeight={360}
|
||||||
>
|
>
|
||||||
{filteredLogs.length > 0 ? (
|
{filteredLogs.length > 0 ? (
|
||||||
<LogViewer entries={filteredLogs} />
|
<LogViewer entries={filteredLogs} className={logStyles.flatScroll} />
|
||||||
) : (
|
) : (
|
||||||
<div className={logStyles.logEmpty}>
|
<div className={logStyles.logEmpty}>
|
||||||
{logSearch || logLevels.size > 0 || logSources.size > 0
|
{logSearch || logLevels.size > 0 || logSources.size > 0
|
||||||
@@ -510,7 +510,7 @@ export default function AgentInstance() {
|
|||||||
maxHeight={360}
|
maxHeight={360}
|
||||||
>
|
>
|
||||||
{feedEvents.length > 0 ? (
|
{feedEvents.length > 0 ? (
|
||||||
<EventFeed events={feedEvents} />
|
<EventFeed events={feedEvents} className={logStyles.flatScroll} />
|
||||||
) : (
|
) : (
|
||||||
<div className={logStyles.logEmpty}>
|
<div className={logStyles.logEmpty}>
|
||||||
{eventStream.isLoading ? 'Loading events…' : 'No events in the selected time range.'}
|
{eventStream.isLoading ? 'Loading events…' : 'No events in the selected time range.'}
|
||||||
|
|||||||
@@ -9,6 +9,16 @@
|
|||||||
max-height: 420px;
|
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 {
|
.logHeader {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user