From f4c2515f25cdce61a3656169c23114f42e49fb5d Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 8 Jul 2025 09:44:53 -0600
Subject: [PATCH] truncate metric headers and values

---
 .../charts/MetricChart/BusterMetricChart.tsx  |  2 +-
 .../stories/BusterMetricChart.stories.tsx     | 22 +++++++++++++++++++
 .../src/metrics/requests.types.ts             | 10 ++++-----
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/ui/charts/MetricChart/BusterMetricChart.tsx b/apps/web/src/components/ui/charts/MetricChart/BusterMetricChart.tsx
index dd28c20e3..c7466ff14 100644
--- a/apps/web/src/components/ui/charts/MetricChart/BusterMetricChart.tsx
+++ b/apps/web/src/components/ui/charts/MetricChart/BusterMetricChart.tsx
@@ -208,7 +208,7 @@ const AnimatedTitleWrapper = ({ title, type }: { title: string; type: 'header' |
   return (
     <AnimatePresence mode="wait" initial={false}>
       {title && (
-        <motion.div className="overflow-visible" {...memoizedAnimation}>
+        <motion.div className="w-full overflow-visible text-center" {...memoizedAnimation}>
           <motion.div className="origin-center">
             <Title truncate as="h4">
               {title}
diff --git a/apps/web/src/components/ui/charts/stories/BusterMetricChart.stories.tsx b/apps/web/src/components/ui/charts/stories/BusterMetricChart.stories.tsx
index 26d5da1a9..a13ff0a62 100644
--- a/apps/web/src/components/ui/charts/stories/BusterMetricChart.stories.tsx
+++ b/apps/web/src/components/ui/charts/stories/BusterMetricChart.stories.tsx
@@ -190,3 +190,25 @@ export const CustomValueLabel: Story = {
     </div>
   )
 };
+
+export const WithLongTextValue: Story = {
+  args: {
+    data: [{ value: 'This is a long text value that should be wrapped' }],
+    metricColumnId: 'value',
+    columnLabelFormats: {
+      value: {
+        ...DEFAULT_COLUMN_LABEL_FORMAT,
+        columnType: 'text',
+        style: 'string'
+      } as ColumnLabelFormat
+    },
+    metricHeader: 'Long Text Value that is like really long',
+    metricSubHeader: 'This is a long text value that should be wrapped',
+    animate: true
+  },
+  render: (args) => (
+    <div className="w-80vw h-[200px] rounded-md border border-red-500 p-4">
+      <BusterMetricChart {...args} />
+    </div>
+  )
+};
diff --git a/packages/server-shared/src/metrics/requests.types.ts b/packages/server-shared/src/metrics/requests.types.ts
index 40bb9042a..39fe52b33 100644
--- a/packages/server-shared/src/metrics/requests.types.ts
+++ b/packages/server-shared/src/metrics/requests.types.ts
@@ -1,6 +1,6 @@
-import { z } from "zod/v4";
-import { ShareRoleSchema, VerificationStatusSchema } from "../share";
-import { ChartConfigPropsSchema } from "./charts";
+import { z } from 'zod/v4';
+import { ShareRoleSchema, VerificationStatusSchema } from '../share';
+import { ChartConfigPropsSchema } from './charts';
 
 export const GetMetricRequestSchema = z.object({
   id: z.string(),
@@ -81,9 +81,7 @@ export type GetMetricRequest = z.infer<typeof GetMetricRequestSchema>;
 export type GetMetricListRequest = z.infer<typeof GetMetricListRequestSchema>;
 export type UpdateMetricRequest = z.infer<typeof UpdateMetricRequestSchema>;
 export type DeleteMetricRequest = z.infer<typeof DeleteMetricRequestSchema>;
-export type DuplicateMetricRequest = z.infer<
-  typeof DuplicateMetricRequestSchema
->;
+export type DuplicateMetricRequest = z.infer<typeof DuplicateMetricRequestSchema>;
 export type BulkUpdateMetricVerificationStatusRequest = z.infer<
   typeof BulkUpdateMetricVerificationStatusRequestSchema
 >;