fix: minor changes

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -11,6 +11,7 @@ import './Tooltip.styles.scss';
 
 const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
+const TOOLTIP_LIST_PADDING = 10;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -19,7 +20,7 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-
+	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
@@ -41,6 +42,15 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
+	const virtuosoHeight = useMemo(() => {
+		return listHeight > 0
+			? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
+			: Math.min(
+					tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
+					TOOLTIP_LIST_MAX_HEIGHT,
+			  );
+	}, [listHeight, tooltipContent.length]);
+
 	return (
 		<div
 			className={cx(
@@ -55,18 +65,18 @@ export default function Tooltip({
 			)}
 			<div
 				style={{
-					height: Math.min(
-						tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
-						TOOLTIP_LIST_MAX_HEIGHT,
-					),
-					minHeight: 0,
+					maxHeight: TOOLTIP_LIST_MAX_HEIGHT,
 				}}
 			>
 				{tooltipContent.length > 0 ? (
 					<Virtuoso
 						className="uplot-tooltip-list"
 						data={tooltipContent}
-						defaultItemHeight={TOOLTIP_ITEM_HEIGHT}
+						style={{
+							height: virtuosoHeight,
+							width: '100%',
+						}}
+						totalListHeightChanged={setListHeight}
 						itemContent={(_, item): JSX.Element => (
 							<div className="uplot-tooltip-item">
 								<div