fix: added fix for tooltip sizing (#10205)

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

@@ -14,6 +14,9 @@ import uPlot from 'uplot';
 
 import { ChartProps } from '../types';
 
+const TOOLTIP_WIDTH_PADDING = 60;
+const TOOLTIP_MIN_WIDTH = 200;
+
 export default function TimeSeries({
 	legendConfig = { position: LegendPosition.BOTTOM },
 	config,
@@ -57,7 +60,7 @@ export default function TimeSeries({
 				legendComponent={legendComponent}
 				layoutChildren={layoutChildren}
 			>
-				{({ chartWidth, chartHeight }): JSX.Element => (
+				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
 					<UPlotChart
 						config={config}
 						data={data}
@@ -78,6 +81,10 @@ export default function TimeSeries({
 								config={config}
 								canPinTooltip={canPinTooltip}
 								syncMode={syncMode}
+								maxWidth={Math.max(
+									TOOLTIP_MIN_WIDTH,
+									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
+								)}
 								syncKey={syncKey}
 								render={(props: TooltipRenderArgs): React.ReactNode => (
 									<Tooltip

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -11,6 +11,7 @@ export interface ChartLayoutProps {
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
+		averageLegendWidth: number;
 	}) => React.ReactNode;
 	layoutChildren?: React.ReactNode;
 	containerWidth: number;
@@ -56,6 +57,7 @@ export default function ChartLayout({
 					{children({
 						chartWidth: chartDimensions.width,
 						chartHeight: chartDimensions.height,
+						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
 				<div

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

@@ -5,7 +5,7 @@
 	-webkit-font-smoothing: antialiased;
 	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	padding: 1rem 1rem 0.5rem 1rem;
+	padding: 1rem 0.5rem 0.5rem 1rem;
 	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
@@ -15,6 +15,12 @@
 		background: var(--bg-vanilla-100);
 		color: var(--bg-ink-500);
 		border: 1px solid var(--bg-vanilla-300);
+
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
 	}
 
 	.uplot-tooltip-header {
@@ -22,18 +28,18 @@
 		font-weight: 500;
 	}
 
-	.uplot-tooltip-list-container {
-		height: 100%;
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-			}
-			&::-webkit-scrollbar-corner {
-				background: transparent;
-			}
-			&::-webkit-scrollbar-thumb {
-				background: rgb(136, 136, 136);
-			}
+	.uplot-tooltip-list {
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
 		}
 	}