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 lastStatsRef = useRef<{ total: number; uniq: number; bounties: number } | null>(null);
|
||||||
const eventSourceRef = useRef<EventSource | null>(null);
|
const eventSourceRef = useRef<EventSource | null>(null);
|
||||||
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const logsContainerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const connect = () => {
|
const connect = () => {
|
||||||
@@ -135,6 +136,11 @@ const Dashboard: React.FC<DashboardProps> = ({ searchQuery }) => {
|
|||||||
};
|
};
|
||||||
}, [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
|
// Tick once a second so the 5-min rolling window stays accurate even
|
||||||
// when logs haven't arrived.
|
// when logs haven't arrived.
|
||||||
const [nowTick, setNowTick] = useState(() => Date.now());
|
const [nowTick, setNowTick] = useState(() => Date.now());
|
||||||
@@ -312,7 +318,7 @@ const Dashboard: React.FC<DashboardProps> = ({ searchQuery }) => {
|
|||||||
<span>{logs.length} RECENT</span>
|
<span>{logs.length} RECENT</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="logs-table-container">
|
<div className="logs-table-container" ref={logsContainerRef}>
|
||||||
<table className="logs-table">
|
<table className="logs-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
Reference in New Issue
Block a user