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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user