From e3a6255c7229e673a9e60af668a49cf7fc1f2d05 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 28 May 2026 14:37:48 -0500
Subject: [PATCH] Fix touch interaction in top models chart

---
 packages/stats/app/src/routes/index.css | 17 ++++++++++++++++-
 packages/stats/app/src/routes/index.tsx | 15 +++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css
index 9aeaf6526a..189b049748 100644
--- a/packages/stats/app/src/routes/index.css
+++ b/packages/stats/app/src/routes/index.css
@@ -2061,7 +2061,22 @@
   }
 
   [data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] {
-    display: none;
+    position: fixed;
+    top: auto;
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+    z-index: 40;
+    width: auto;
+    min-width: 0;
+    max-height: min(320px, 48vh);
+    overflow: auto;
+    transform: none;
+  }
+
+  [data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"][data-placement] {
+    right: 12px;
+    left: 12px;
   }
 }
 
diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx
index 9cc566eb3e..7673adc8ad 100644
--- a/packages/stats/app/src/routes/index.tsx
+++ b/packages/stats/app/src/routes/index.tsx
@@ -447,6 +447,11 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
               data-active={activeIndex() === dayIndex() ? "true" : undefined}
               data-muted={activeIndex() !== undefined && activeIndex() !== dayIndex() ? "true" : undefined}
               style={{ "--top-models-bar-height": `${getTopModelsBarHeight(usageTotal(day), maxTotal())}%` }}
+              onPointerDown={(event) => {
+                if (event.pointerType !== "touch") return
+                setActiveIndex(dayIndex())
+                setActiveSegment(undefined)
+              }}
               onPointerEnter={() => {
                 setActiveIndex(dayIndex())
                 setActiveSegment(undefined)
@@ -490,6 +495,16 @@ function TopModelsChart(props: { data: UsagePoint[]; range: UsageRange }) {
                         setActiveIndex(dayIndex())
                         setActiveSegment(item.index)
                       }}
+                      onPointerDown={(event) => {
+                        event.stopPropagation()
+                        setActiveIndex(dayIndex())
+                        setActiveSegment(item.index)
+                      }}
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        setActiveIndex(dayIndex())
+                        setActiveSegment(item.index)
+                      }}
                     />
                   )}
                 </For>