diff --git a/src/design-system/composites/EventFeed/EventFeed.tsx b/src/design-system/composites/EventFeed/EventFeed.tsx index a57359e..c55fba9 100644 --- a/src/design-system/composites/EventFeed/EventFeed.tsx +++ b/src/design-system/composites/EventFeed/EventFeed.tsx @@ -81,25 +81,25 @@ export function EventFeed({ events, maxItems = 200, className }: EventFeedProps) .filter((e) => activeFilters.size === 0 || activeFilters.has(e.severity)) .filter((e) => !searchLower || getSearchableText(e).toLowerCase().includes(searchLower)) - // Auto-scroll to bottom - const scrollToBottom = useCallback(() => { + // Auto-scroll to top (newest entries are at top in desc sort) + const scrollToTop = useCallback(() => { const el = scrollRef.current if (el) { - el.scrollTop = el.scrollHeight + el.scrollTop = 0 } }, []) useEffect(() => { if (!isPaused) { - scrollToBottom() + scrollToTop() } - }, [events, isPaused, scrollToBottom]) + }, [events, isPaused, scrollToTop]) function handleScroll() { const el = scrollRef.current if (!el) return - const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 8 - setIsPaused(!atBottom) + const atTop = el.scrollTop < 8 + setIsPaused(!atTop) } function toggleFilter(severity: SeverityFilter) { @@ -196,10 +196,10 @@ export function EventFeed({ events, maxItems = 200, className }: EventFeedProps) className={styles.resumeBtn} onClick={() => { setIsPaused(false) - scrollToBottom() + scrollToTop() }} > - ↓ Resume auto-scroll + ↑ Scroll to latest )} diff --git a/src/design-system/composites/LogViewer/LogViewer.tsx b/src/design-system/composites/LogViewer/LogViewer.tsx index 4839d76..cc30e2a 100644 --- a/src/design-system/composites/LogViewer/LogViewer.tsx +++ b/src/design-system/composites/LogViewer/LogViewer.tsx @@ -35,18 +35,18 @@ function formatTime(iso: string): string { export function LogViewer({ entries, maxHeight = 400, className }: LogViewerProps) { const scrollRef = useRef(null) - const isAtBottomRef = useRef(true) + const isAtTopRef = useRef(true) const handleScroll = useCallback(() => { const el = scrollRef.current if (!el) return - isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 20 + isAtTopRef.current = el.scrollTop < 20 }, []) useEffect(() => { const el = scrollRef.current - if (el && isAtBottomRef.current) { - el.scrollTop = el.scrollHeight + if (el && isAtTopRef.current) { + el.scrollTop = 0 } }, [entries])