truncate tooltip container name if very long

beszel/site/src/components/charts/container-chart.tsx

@@ -157,6 +157,7 @@ export default memo(function ContainerChart({
 					<ChartTooltip
 						animationEasing="ease-out"
 						animationDuration={150}
+						truncate={true}
 						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 						// @ts-ignore
 						itemSorter={(a, b) => b.value - a.value}

beszel/site/src/components/ui/chart.tsx

@@ -99,6 +99,7 @@ const ChartTooltipContent = React.forwardRef<
 			unit?: string
 			filter?: string
 			contentFormatter?: (item: any, key: string) => React.ReactNode | string
+			truncate?: boolean
 		}
 >(
 	(
@@ -119,6 +120,7 @@ const ChartTooltipContent = React.forwardRef<
 			filter,
 			itemSorter,
 			contentFormatter: content = undefined,
+			truncate = false,
 		},
 		ref
 	) => {
@@ -214,10 +216,15 @@ const ChartTooltipContent = React.forwardRef<
 												nestLabel ? "items-end" : "items-center"
 											)}
 										>
-											<div className="grid gap-1.5">
+											{nestLabel ? tooltipLabel : null}
-												{nestLabel ? tooltipLabel : null}
+											<span
-												<span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+												className={cn(
-											</div>
+													"text-muted-foreground",
+													truncate ? "max-w-40 truncate leading-normal -my-1" : ""
+												)}
+											>
+												{itemConfig?.label || item.name}
+											</span>
 											{item.value !== undefined && (
 												<span className="font-medium tabular-nums text-foreground">
 													{content && typeof content === "function"