chore: minor fix

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -13,7 +13,7 @@ import uPlot from 'uplot';
 
 import { ChartProps } from '../types';
 
-const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_WIDTH_PADDING = 120;
 const TOOLTIP_MIN_WIDTH = 200;
 
 export default function ChartWrapper({

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss

@@ -5,7 +5,6 @@
 	-webkit-font-smoothing: antialiased;
 	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	padding: 1rem 0.5rem 0.5rem 1rem;
 	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
@@ -21,30 +20,58 @@
 				background: var(--bg-vanilla-400);
 			}
 		}
+
+		.uplot-tooltip-divider {
+			background-color: var(--bg-vanilla-300);
+		}
 	}
 
-	.uplot-tooltip-header {
-		font-size: 13px;
-		font-weight: 500;
+	.uplot-tooltip-header-container {
+		padding: 1rem 0.5rem 0 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		&:last-child {
+			padding-bottom: 1rem;
+		}
+
+		.uplot-tooltip-header {
+			font-size: 13px;
+			font-weight: 500;
+		}
+
+		// Pinned active-series row has tighter left padding since it sits
+		// directly under the timestamp header with no marker indent.
+		.uplot-tooltip-item {
+			padding: 4px 8px 4px 0;
+		}
 	}
 
-	.uplot-tooltip-list-container {
-		overflow-y: auto;
-		max-height: 330px;
+	.uplot-tooltip-divider {
+		width: 100%;
+		height: 1px;
+		background-color: var(--bg-ink-100);
+	}
 
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-			}
+	.uplot-tooltip-list {
+		// Virtuoso absolutely positions its item rows; left: 0 prevents accidental
+		// horizontal offset when the scroller has padding or transform applied.
+		div[data-viewport-type='element'] {
+			left: 0;
+		}
 
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
 
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-slate-100);
-				border-radius: 0.5rem;
-			}
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
 		}
 	}
 
@@ -52,10 +79,11 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		margin-bottom: 4px;
+		padding: 4px 8px 4px 16px;
 
 		.uplot-tooltip-item-marker {
 			border-radius: 50%;
+			border-style: solid;
 			border-width: 2px;
 			width: 12px;
 			height: 12px;
@@ -63,8 +91,24 @@
 		}
 
 		.uplot-tooltip-item-content {
-			white-space: wrap;
-			word-break: break-all;
+			width: 100%;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			justify-content: space-between;
+
+			.uplot-tooltip-item-label {
+				white-space: normal;
+				overflow-wrap: anywhere;
+			}
+
+			&-separator {
+				flex: 1;
+				border-width: 0.5px;
+				border-style: dashed;
+				min-width: 24px;
+				opacity: 0.5;
+			}
 		}
 	}
 }

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

@@ -6,13 +6,14 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTimezone } from 'providers/Timezone';
 
-import { TooltipProps } from '../types';
+import { TooltipContentItem, TooltipProps } from '../types';
 
 import './Tooltip.styles.scss';
 
-const TOOLTIP_LIST_MAX_HEIGHT = 330;
-const TOOLTIP_ITEM_HEIGHT = 38;
-const TOOLTIP_LIST_PADDING = 10;
+// Fallback per-item height used for the initial size estimate before
+// Virtuoso reports the real total height via totalListHeightChanged.
+const ITEM_HEIGHT = 38;
+const LIST_MAX_HEIGHT = 300;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -21,27 +22,26 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [listHeight, setListHeight] = useState(0);
-	const tooltipContent = content ?? [];
 	const { timezone: userTimezone } = useTimezone();
+	const [totalListHeight, setTotalListHeight] = useState(0);
 
-	const resolvedTimezone = useMemo(() => {
-		if (!timezone) {
-			return userTimezone.value;
-		}
-		return timezone.value;
-	}, [timezone, userTimezone]);
+	const tooltipContent = useMemo(() => content ?? [], [content]);
+
+	const resolvedTimezone = timezone?.value ?? userTimezone.value;
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
 			return null;
 		}
-		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
 			return null;
 		}
-		return dayjs(data[0][cursorIdx] * 1000)
+		const ts = uPlotInstance.data[0]?.[cursorIdx];
+		if (ts == null) {
+			return null;
+		}
+		return dayjs(ts * 1000)
 			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
@@ -51,18 +51,24 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
-	const virtuosoStyle = useMemo(() => {
-		return {
-			height:
-				listHeight > 0
-					? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
-					: Math.min(
-							tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
-							TOOLTIP_LIST_MAX_HEIGHT,
-					  ),
-			width: '100%',
-		};
-	}, [listHeight, tooltipContent.length]);
+	const activeItem = useMemo(
+		() => tooltipContent.find((item) => item.isActive) ?? null,
+		[tooltipContent],
+	);
+
+	// Use the measured height from Virtuoso when available; fall back to a
+	// per-item estimate on the first render.  Math.ceil prevents a 1 px
+	// subpixel rounding gap from triggering a spurious scrollbar.
+	const virtuosoHeight =
+		totalListHeight > 0
+			? Math.ceil(Math.min(totalListHeight, LIST_MAX_HEIGHT))
+			: Math.min(tooltipContent.length * ITEM_HEIGHT, LIST_MAX_HEIGHT);
+
+	const showHeader = showTooltipHeader || activeItem != null;
+	// With a single series the active item is fully represented in the header —
+	// hide the divider and list to avoid showing a duplicate row.
+	const showList = tooltipContent.length > 1;
+	const showDivider = showList && showHeader;
 
 	return (
 		<div
@@ -72,38 +78,85 @@ export default function Tooltip({
 			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-					<span>{headerTitle}</span>
+			{showHeader && (
+				<div className="uplot-tooltip-header-container">
+					{showTooltipHeader && headerTitle && (
+						<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+							<span>{headerTitle}</span>
+						</div>
+					)}
+
+					{activeItem && (
+						<TooltipItem
+							item={activeItem}
+							isItemActive={true}
+							containerTestId="uplot-tooltip-pinned"
+							markerTestId="uplot-tooltip-pinned-marker"
+							contentTestId="uplot-tooltip-pinned-content"
+						/>
+					)}
 				</div>
 			)}
-			<div className="uplot-tooltip-list-container">
-				{tooltipContent.length > 0 ? (
-					<Virtuoso
-						className="uplot-tooltip-list"
-						data-testid="uplot-tooltip-list"
-						data={tooltipContent}
-						style={virtuosoStyle}
-						totalListHeightChanged={setListHeight}
-						itemContent={(_, item): JSX.Element => (
-							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
-								<div
-									className="uplot-tooltip-item-marker"
-									style={{ borderColor: item.color }}
-									data-is-legend-marker={true}
-									data-testid="uplot-tooltip-item-marker"
-								/>
-								<div
-									className="uplot-tooltip-item-content"
-									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
-									data-testid="uplot-tooltip-item-content"
-								>
-									{item.label}: {item.tooltipValue}
-								</div>
-							</div>
-						)}
-					/>
-				) : null}
+
+			{showDivider && <span className="uplot-tooltip-divider" />}
+
+			{showList && (
+				<Virtuoso
+					className="uplot-tooltip-list"
+					data-testid="uplot-tooltip-list"
+					data={tooltipContent}
+					style={{ height: virtuosoHeight, width: '100%' }}
+					totalListHeightChanged={setTotalListHeight}
+					itemContent={(_, item): JSX.Element => (
+						<TooltipItem item={item} isItemActive={false} />
+					)}
+				/>
+			)}
+		</div>
+	);
+}
+
+interface TooltipItemProps {
+	item: TooltipContentItem;
+	isItemActive: boolean;
+	containerTestId?: string;
+	markerTestId?: string;
+	contentTestId?: string;
+}
+
+function TooltipItem({
+	item,
+	isItemActive,
+	containerTestId = 'uplot-tooltip-item',
+	markerTestId = 'uplot-tooltip-item-marker',
+	contentTestId = 'uplot-tooltip-item-content',
+}: TooltipItemProps): JSX.Element {
+	return (
+		<div
+			className="uplot-tooltip-item"
+			style={{
+				opacity: isItemActive ? 1 : 0.8,
+				fontWeight: isItemActive ? 700 : 400,
+			}}
+			data-testid={containerTestId}
+		>
+			<div
+				className="uplot-tooltip-item-marker"
+				style={{ borderColor: item.color }}
+				data-is-legend-marker={true}
+				data-testid={markerTestId}
+			/>
+			<div
+				className="uplot-tooltip-item-content"
+				style={{ color: item.color }}
+				data-testid={contentTestId}
+			>
+				<span className="uplot-tooltip-item-label">{item.label}</span>
+				<span
+					className="uplot-tooltip-item-content-separator"
+					style={{ borderColor: item.color }}
+				/>
+				<span className="uplot-tooltip-item-value">{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

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

@@ -157,22 +157,30 @@ describe('Tooltip', () => {
 		expect(container).not.toHaveClass('lightMode');
 	});
 
-	it('renders tooltip items when content is provided', () => {
+	it('renders single active item in header only, without a list', () => {
 		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent()];
+		const content = [createTooltipContent({ isActive: true })];
 
 		renderTooltip({ uPlotInstance, content });
 
-		const list = screen.queryByTestId('uplot-tooltip-list');
+		// Active item is shown in the header, not duplicated in a list
+		expect(screen.queryByTestId('uplot-tooltip-list')).toBeNull();
+		expect(screen.getByTestId('uplot-tooltip-pinned')).toBeInTheDocument();
+		const pinnedContent = screen.getByTestId('uplot-tooltip-pinned-content');
+		expect(pinnedContent).toHaveTextContent('Series A');
+		expect(pinnedContent).toHaveTextContent('10');
+	});
 
-		expect(list).not.toBeNull();
+	it('renders list when multiple series are present', () => {
+		const uPlotInstance = createUPlotInstance(null);
+		const content = [
+			createTooltipContent({ isActive: true }),
+			createTooltipContent({ label: 'Series B', isActive: false }),
+		];
 
-		const marker = screen.getByTestId('uplot-tooltip-item-marker');
-		const itemContent = screen.getByTestId('uplot-tooltip-item-content');
+		renderTooltip({ uPlotInstance, content });
 
-		expect(marker).toHaveStyle({ borderColor: '#ff0000' });
-		expect(itemContent).toHaveStyle({ color: '#ff0000', fontWeight: '700' });
-		expect(itemContent).toHaveTextContent('Series A: 10');
+		expect(screen.getByTestId('uplot-tooltip-list')).toBeInTheDocument();
 	});
 
 	it('does not render tooltip list when content is empty', () => {
@@ -192,7 +200,7 @@ describe('Tooltip', () => {
 		renderTooltip({ uPlotInstance, content });
 
 		const list = screen.getByTestId('uplot-tooltip-list');
-		expect(list).toHaveStyle({ height: '210px' });
+		expect(list).toHaveStyle({ height: '200px' });
 	});
 
 	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -72,8 +72,7 @@ export function buildTooltipContent({
 	decimalPrecision?: PrecisionOption;
 	isStackedBarChart?: boolean;
 }): TooltipContentItem[] {
-	const active: TooltipContentItem[] = [];
-	const rest: TooltipContentItem[] = [];
+	const items: TooltipContentItem[] = [];
 
 	for (let index = 1; index < series.length; index += 1) {
 		const s = series[index];
@@ -98,21 +97,17 @@ export function buildTooltipContent({
 		const isActive = index === activeSeriesIndex;
 
 		if (Number.isFinite(baseValue) && baseValue !== null) {
-			const item: TooltipContentItem = {
+			items.push({
 				label: String(s.label ?? ''),
 				value: baseValue,
 				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
 				color: resolveSeriesColor(s.stroke, uPlotInstance, index),
 				isActive,
-			};
-
-			if (isActive) {
-				active.push(item);
-			} else {
-				rest.push(item);
-			}
+			});
 		}
 	}
 
-	return [...active, ...rest];
+	// Return items in series-index order (stable) — never re-sort by active state,
+	// so the list position of each series stays fixed as the user moves the cursor.
+	return items;
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.styles.scss

@@ -6,7 +6,7 @@
 	white-space: pre;
 	border-radius: 4px;
 	position: fixed;
-	overflow: auto;
+	overflow: hidden;
 	transform: translate(-1000px, -1000px); // hide the tooltip initially
 	opacity: 0;
 	pointer-events: none;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -36,8 +36,8 @@ const HOVER_DISMISS_DELAY_MS = 100;
 export default function TooltipPlugin({
 	config,
 	render,
-	maxWidth = 300,
-	maxHeight = 400,
+	maxWidth = 450,
+	maxHeight = 600,
 	syncMode = DashboardCursorSync.None,
 	syncKey = '_tooltip_sync_global_',
 	pinnedTooltipElement,