From 358e05d544d9f46b94f8af05f03fe4cb8370264e Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Tue, 22 Apr 2025 20:16:11 -0400
Subject: [PATCH] truncate tooltip container name if very long

---
 .../src/components/charts/container-chart.tsx     |  1 +
 beszel/site/src/components/ui/chart.tsx           | 15 +++++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/beszel/site/src/components/charts/container-chart.tsx b/beszel/site/src/components/charts/container-chart.tsx
index 0a621f6..32727da 100644
--- a/beszel/site/src/components/charts/container-chart.tsx
+++ b/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}
diff --git a/beszel/site/src/components/ui/chart.tsx b/beszel/site/src/components/ui/chart.tsx
index 091f699..83e105a 100644
--- a/beszel/site/src/components/ui/chart.tsx
+++ b/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}
-												<span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
-											</div>
+											{nestLabel ? tooltipLabel : null}
+											<span
+												className={cn(
+													"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"