add spacing for long temperature chart tooltip (#1299)

internal/site/src/components/routes/system.tsx

@@ -41,6 +41,7 @@ import { useIntersectionObserver } from "@/lib/use-intersection-observer"
 import {
 	chartTimeData,
 	cn,
+	compareSemVer,
 	debounce,
 	decimalString,
 	formatBytes,
@@ -170,8 +171,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	const [system, setSystem] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
 	const [containerData, setContainerData] = useState([] as ChartData["containerData"])
-	const netCardRef = useRef<HTMLDivElement>(null)
+	const temperatureChartRef = useRef<HTMLDivElement>(null)
 	const persistChartTime = useRef(false)
+	const [bottomSpacing, setBottomSpacing] = useState(0)
 	const [chartLoading, setChartLoading] = useState(true)
 	const isLongerChart = !["1m", "1h"].includes(chartTime) // true if chart time is not 1m or 1h
 	const userSettings = $userSettings.get()
@@ -396,6 +398,21 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 		}[]
 	}, [system, t])
 
+	/** Space for tooltip if more than 10 sensors and no containers table */
+	useEffect(() => {
+		const sensors = Object.keys(systemStats.at(-1)?.stats.t ?? {})
+		if (!temperatureChartRef.current || sensors.length < 10 || containerData.length > 0) {
+			setBottomSpacing(0)
+			return
+		}
+		const tooltipHeight = (sensors.length - 10) * 17.8 - 40
+		const wrapperEl = chartWrapRef.current as HTMLDivElement
+		const wrapperRect = wrapperEl.getBoundingClientRect()
+		const chartRect = temperatureChartRef.current.getBoundingClientRect()
+		const distanceToBottom = wrapperRect.bottom - chartRect.bottom
+		setBottomSpacing(tooltipHeight - distanceToBottom)
+	}, [])
+
 	// keyboard navigation between systems
 	useEffect(() => {
 		if (!systems.length) {
@@ -728,14 +745,9 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 					</ChartCard>
 
 					{containerFilterBar && containerData.length > 0 && (
-						<div
-							ref={netCardRef}
-							className={cn({
-								"col-span-full": !grid,
-							})}
-						>
 						<ChartCard
 							empty={dataEmpty}
+							grid={grid}
 							title={dockerOrPodman(t`Docker Network I/O`, system)}
 							description={dockerOrPodman(t`Network traffic of docker containers`, system)}
 							cornerEl={containerFilterBar}
@@ -747,7 +759,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 								chartConfig={containerChartConfigs.network}
 							/>
 						</ChartCard>
-						</div>
 					)}
 
 					{/* Swap chart */}
@@ -777,6 +788,10 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 
 					{/* Temperature chart */}
 					{systemStats.at(-1)?.stats.t && (
+						<div
+							ref={temperatureChartRef}
+							className={cn("odd:last-of-type:col-span-full", { "col-span-full": !grid })}
+						>
 							<ChartCard
 								empty={dataEmpty}
 								grid={grid}
@@ -787,6 +802,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 							>
 								<TemperatureChart chartData={chartData} />
 							</ChartCard>
+						</div>
 					)}
 
 					{/* Battery chart */}
@@ -974,10 +990,13 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						})}
 					</div>
 				)}
-				{id && containerData.length > 0 && (
+				{containerData.length > 0 && compareSemVer(chartData.agentVersion, parseSemVer("0.14.0")) >= 0 && (
 					<LazyContainersTable systemId={id} />
 				)}
 			</div>
+
+			{/* add space for tooltip if more than 12 containers */}
+			{bottomSpacing > 0 && <span className="block" style={{ height: bottomSpacing }} />}
 		</>
 	)
 })

supplemental/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Add `MFA_OTP` environment variable to enable email-based one-time password for users and/or superusers. 
 
+- Add spacing for long temperature chart tooltip. (#1299)
+
 ## 0.14.0
 
 - Add `/containers` page for viewing current status of all running containers. (#928)