From c1577d3ba58c78bb4c3cb8e54090778be39a5229 Mon Sep 17 00:00:00 2001 From: Henry Dollman Date: Mon, 14 Oct 2024 19:03:02 -0400 Subject: [PATCH] fix bottom spacing --- beszel/site/src/components/routes/system.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 431025e..b0d8c81 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -107,6 +107,7 @@ export default function SystemDetail({ name }: { name: string }) { const [containerData, setContainerData] = useState([] as ChartData['containerData']) const netCardRef = useRef(null) const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element) + const [bottomSpacing, setBottomSpacing] = useState(0) const isLongerChart = chartTime !== '1h' useEffect(() => { @@ -265,17 +266,18 @@ export default function SystemDetail({ name }: { name: string }) { }, [system.info]) /** Space for tooltip if more than 12 containers */ - const bottomSpacing = useMemo(() => { + useEffect(() => { if (!netCardRef.current || !containerData.length) { - return 0 + setBottomSpacing(0) + return } const tooltipHeight = (Object.keys(containerData[0]).length - 11) * 17.8 - 40 const wrapperEl = document.getElementById('chartwrap') as HTMLDivElement const wrapperRect = wrapperEl.getBoundingClientRect() const chartRect = netCardRef.current.getBoundingClientRect() const distanceToBottom = wrapperRect.bottom - chartRect.bottom - return tooltipHeight - distanceToBottom - }, [netCardRef.current, containerData]) + setBottomSpacing(tooltipHeight - distanceToBottom) + }, [netCardRef, containerData]) if (!system.id) { return null