From bb20f69a630f80667ed34172490720d4eedf7028 Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Tue, 21 Jul 2026 11:22:19 +0200
Subject: [PATCH] fix(ui): prevent findings timeline axis overflow (#11545)

---
 .../findings-timeline-y-axis.fixed.md         |  1 +
 ui/components/graphs/line-chart.test.tsx      | 42 +++++++++++++++++++
 ui/components/graphs/line-chart.tsx           |  3 ++
 ui/components/graphs/line-chart.utils.ts      |  8 ++++
 4 files changed, 54 insertions(+)
 create mode 100644 ui/changelog.d/findings-timeline-y-axis.fixed.md
 create mode 100644 ui/components/graphs/line-chart.test.tsx
 create mode 100644 ui/components/graphs/line-chart.utils.ts

diff --git a/ui/changelog.d/findings-timeline-y-axis.fixed.md b/ui/changelog.d/findings-timeline-y-axis.fixed.md
new file mode 100644
index 0000000000..4dd338070f
--- /dev/null
+++ b/ui/changelog.d/findings-timeline-y-axis.fixed.md
@@ -0,0 +1 @@
+Findings Severity Over Time chart Y-axis labels no longer overflow for large findings counts
diff --git a/ui/components/graphs/line-chart.test.tsx b/ui/components/graphs/line-chart.test.tsx
new file mode 100644
index 0000000000..3febcd46f3
--- /dev/null
+++ b/ui/components/graphs/line-chart.test.tsx
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+
+import { formatYAxisTick } from "./line-chart.utils";
+
+describe("formatYAxisTick", () => {
+  describe("when findings counts are large", () => {
+    it("should compact six-digit values so Y-axis labels do not overflow", () => {
+      // Given
+      const tickValue = 150000;
+
+      // When
+      const formattedValue = formatYAxisTick(tickValue);
+
+      // Then
+      expect(formattedValue).toBe("150K");
+    });
+
+    it("should compact million-scale values", () => {
+      // Given
+      const tickValue = 1200000;
+
+      // When
+      const formattedValue = formatYAxisTick(tickValue);
+
+      // Then
+      expect(formattedValue).toBe("1.2M");
+    });
+  });
+
+  describe("when findings counts are small", () => {
+    it("should keep values below 1000 readable without compact notation", () => {
+      // Given
+      const tickValue = 999;
+
+      // When
+      const formattedValue = formatYAxisTick(tickValue);
+
+      // Then
+      expect(formattedValue).toBe("999");
+    });
+  });
+});
diff --git a/ui/components/graphs/line-chart.tsx b/ui/components/graphs/line-chart.tsx
index eab0551bb6..1ffdd19dc3 100644
--- a/ui/components/graphs/line-chart.tsx
+++ b/ui/components/graphs/line-chart.tsx
@@ -17,6 +17,7 @@ import {
   ChartTooltip,
 } from "@/components/shadcn/chart/Chart";
 
+import { formatYAxisTick } from "./line-chart.utils";
 import { AlertPill } from "./shared/alert-pill";
 import { ChartLegend } from "./shared/chart-legend";
 import { CustomActiveDot, PointClickData } from "./shared/custom-active-dot";
@@ -222,6 +223,8 @@ export function LineChart({
             tickLine={false}
             axisLine={false}
             tickMargin={8}
+            tickFormatter={formatYAxisTick}
+            width={56}
             padding={{ top: 20 }}
             tick={{
               fill: "var(--color-text-neutral-secondary)",
diff --git a/ui/components/graphs/line-chart.utils.ts b/ui/components/graphs/line-chart.utils.ts
new file mode 100644
index 0000000000..b219529c24
--- /dev/null
+++ b/ui/components/graphs/line-chart.utils.ts
@@ -0,0 +1,8 @@
+const Y_AXIS_TICK_FORMATTER = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+export function formatYAxisTick(value: number) {
+  return Y_AXIS_TICK_FORMATTER.format(value);
+}