Update TraceWaterfallList.tsx

frontend/src/pages/Traces/TraceWaterfallList.tsx

@@ -8,6 +8,7 @@ import {
 	IconSolidXCircle,
 	Stack,
 	Table,
+	Tabs,
 	Text,
 } from '@highlight-run/ui/components'
 import useLocalStorage from '@rehooks/local-storage'
@@ -27,9 +28,13 @@ img.src =
 	'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
 
 export const TraceWaterfallList: React.FC = () => {
-	const { selectedSpan, spans, totalDuration, setSelectedSpan } = useTrace()
+	const { selectedSpan, spanCount, spans, totalDuration, setSelectedSpan } =
+		useTrace()
 	const bodyRef = useRef<HTMLDivElement>(null)
+	const tabsContext = Tabs.useContext()!
+	const activeTab = tabsContext.useState('activeId')
 	const [query, setQuery] = useState('')
+	const [bodyHeight, setBodyHeight] = useState('auto')
 	const [columns, setColumns] = useLocalStorage(
 		'highlight-trace-waterfall-list-column-sizes',
 		[
@@ -45,6 +50,14 @@ export const TraceWaterfallList: React.FC = () => {
 		[spans, query],
 	)
 
+	useEffect(() => {
+		const bodyHeight = bodyRef.current?.clientHeight ?? 0
+
+		if (bodyHeight > 0) {
+			setBodyHeight(`${Math.min(bodyHeight, 280)}px`)
+		}
+	}, [spanCount, activeTab])
+
 	const handleDrag = (e: React.DragEvent, name: string) => {
 		const headerRef = e.currentTarget.parentElement?.parentElement
 		const leftElementCoord = headerRef?.getBoundingClientRect()
@@ -83,24 +96,6 @@ export const TraceWaterfallList: React.FC = () => {
 		}
 	}
 
-	const initialHeightRef = useRef<number | null>(null)
-	useEffect(() => {
-		const observer = new ResizeObserver(() => {
-			if (bodyRef.current && initialHeightRef.current === null) {
-				initialHeightRef.current = bodyRef.current.offsetHeight
-				bodyRef.current.style.height = `${initialHeightRef.current}px`
-			}
-		})
-
-		if (bodyRef.current) {
-			observer.observe(bodyRef.current)
-		}
-
-		return () => {
-			observer.disconnect()
-		}
-	}, [])
-
 	return (
 		<Box border="dividerWeak" borderRadius="6" overflow="hidden">
 			<Form>
@@ -155,7 +150,7 @@ export const TraceWaterfallList: React.FC = () => {
 				<Table.Body
 					ref={bodyRef}
 					overflowY="auto"
-					style={{ maxHeight: initialHeightRef.current ?? 280 }}
+					style={{ height: bodyHeight }}
 				>
 					{canRenderSpans ? (
 						spans.map((span) => (