From 34a83b27c3f858412ca75ffd5c42f3c3dd22cb40 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 21 Aug 2026 17:13:13 -0500
Subject: [PATCH] fix(stats): improve chart tooltip truncation

---
 packages/stats/app/src/routes/[lab]/[model].tsx |  3 ++-
 packages/stats/app/src/routes/[lab]/index.tsx   |  6 ++++--
 packages/stats/app/src/routes/index.css         | 11 +++++++++--
 packages/stats/app/src/routes/index.tsx         |  4 ++--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/stats/app/src/routes/[lab]/[model].tsx b/packages/stats/app/src/routes/[lab]/[model].tsx
index d7c0e304216..ad931aab1c2 100644
--- a/packages/stats/app/src/routes/[lab]/[model].tsx
+++ b/packages/stats/app/src/routes/[lab]/[model].tsx
@@ -812,7 +812,8 @@ function ModelTrendSection(props: {
                   <div data-slot="tooltip-divider" />
                   <p>
                     <span data-slot="tooltip-label">
-                      <i data-kind={props.lineTone === "active" ? "users" : "tokens"} /> {props.rowLabel}
+                      <i data-kind={props.lineTone === "active" ? "users" : "tokens"} />
+                      <span data-slot="tooltip-name">{props.rowLabel}</span>
                     </span>
                     <b>{props.formatValue(props.value(active.point))}</b>
                   </p>
diff --git a/packages/stats/app/src/routes/[lab]/index.tsx b/packages/stats/app/src/routes/[lab]/index.tsx
index 4eddf75ef90..f79f5c21f41 100644
--- a/packages/stats/app/src/routes/[lab]/index.tsx
+++ b/packages/stats/app/src/routes/[lab]/index.tsx
@@ -473,13 +473,15 @@ function LabUsageSection(props: { lab: ModelCatalogLab; data: StatsLabData | nul
                     <div data-slot="tooltip-divider" />
                     <p>
                       <span data-slot="tooltip-label">
-                        <i data-kind="tokens" /> {i18n.t("lab.dailyTokens")}
+                        <i data-kind="tokens" />
+                        <span data-slot="tooltip-name">{i18n.t("lab.dailyTokens")}</span>
                       </span>
                       <b>{formatTokens(active.point.tokens)}</b>
                     </p>
                     <p>
                       <span data-slot="tooltip-label">
-                        <i data-kind="users" /> {i18n.t("model.uniqueUsers")}
+                        <i data-kind="users" />
+                        <span data-slot="tooltip-name">{i18n.t("model.uniqueUsers")}</span>
                       </span>
                       <b>{formatUsers(active.point.users)}</b>
                     </p>
diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css
index b3f25eff01d..edbdd048311 100644
--- a/packages/stats/app/src/routes/index.css
+++ b/packages/stats/app/src/routes/index.css
@@ -1590,6 +1590,13 @@ body {
   white-space: nowrap;
 }
 
+[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-name"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 [data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] {
   height: 1px;
   margin: 4px -16px 2px;
@@ -1677,7 +1684,7 @@ body {
 
 [data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] p {
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 4px;
+  gap: 1ch;
   height: 16px;
   margin: 4px 0 0;
   padding: 0 8px;
@@ -4723,7 +4730,7 @@ body {
 
 [data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] p {
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 4px;
+  gap: 1ch;
   height: 20px;
   margin: 8px 0;
   padding: 0 8px;
diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx
index 398f53f7186..f984cb7397c 100644
--- a/packages/stats/app/src/routes/index.tsx
+++ b/packages/stats/app/src/routes/index.tsx
@@ -568,8 +568,8 @@ function TopModelsChart(props: {
                               style={{
                                 background: getRankColor(item.segment.model, item.index, segmentOrder(), usageColors),
                               }}
-                            />{" "}
-                            {item.segment.model}
+                            />
+                            <span data-slot="tooltip-name">{item.segment.model}</span>
                           </span>
                           <b>{formatUsageChartValue(item.segment.value, metric())}</b>
                         </p>