fix(ui): reset live feed scroll to top on log update

Sticky thead was floating mid-content when the container auto-scrolled
as new log entries arrived. Pinning scrollTop to 0 on each logs update
keeps the thead at position 0 where it belongs.
This commit is contained in:
2026-04-30 00:30:46 -04:00
parent fca0953439
commit 9ed0094045

View File

@@ -89,6 +89,7 @@ const Dashboard: React.FC<DashboardProps> = ({ searchQuery }) => {
const lastStatsRef = useRef<{ total: number; uniq: number; bounties: number } | null>(null);
const eventSourceRef = useRef<EventSource | null>(null);
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const logsContainerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const connect = () => {
@@ -135,6 +136,11 @@ const Dashboard: React.FC<DashboardProps> = ({ searchQuery }) => {
};
}, [searchQuery]);
// Keep the live feed scrolled to the top so the sticky thead never floats.
useEffect(() => {
if (logsContainerRef.current) logsContainerRef.current.scrollTop = 0;
}, [logs]);
// Tick once a second so the 5-min rolling window stays accurate even
// when logs haven't arrived.
const [nowTick, setNowTick] = useState(() => Date.now());
@@ -312,7 +318,7 @@ const Dashboard: React.FC<DashboardProps> = ({ searchQuery }) => {
<span>{logs.length} RECENT</span>
</div>
</div>
<div className="logs-table-container">
<div className="logs-table-container" ref={logsContainerRef}>
<table className="logs-table">
<thead>
<tr>