From 01aa149fa3b7d93960827152632d641ecc89ae8f Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Tue, 24 Mar 2026 22:41:39 +0000
Subject: [PATCH] fix(site): fix DiffViewer rename header layout (#23540)

---
 site/src/components/ai-elements/tool/utils.ts |  4 ++-
 .../DiffViewer/DiffViewer.stories.tsx         | 27 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/site/src/components/ai-elements/tool/utils.ts b/site/src/components/ai-elements/tool/utils.ts
index 6bf59c1fb9..0c58b3c092 100644
--- a/site/src/components/ai-elements/tool/utils.ts
+++ b/site/src/components/ai-elements/tool/utils.ts
@@ -262,7 +262,8 @@ const DIFF_HEADER_CSS = [
 	// text baselines match despite different font sizes (11px vs
 	// 12px). Without this the box-centering default shifts the
 	// badge a fraction of a pixel above the title.
-	"[data-diffs-header] [data-header-content] { align-items: baseline; }",
+	"[data-diffs-header] [data-header-content] { align-items: baseline; overflow: hidden; }",
+	"[data-diffs-header] [data-rename-icon] { align-self: center; }",
 	"[data-diffs-header] [data-header-content]::before {",
 	"  font-size: 11px;",
 	"  font-weight: 600;",
@@ -288,6 +289,7 @@ const DIFF_HEADER_CSS = [
 
 	// Stat counts styled as compact pill badges.
 	"[data-diffs-header] [data-metadata] {",
+	"  flex-shrink: 0;",
 	"  flex-direction: row-reverse;",
 	"  align-items: stretch;",
 	"  gap: 0 !important;",
diff --git a/site/src/pages/AgentsPage/components/DiffViewer/DiffViewer.stories.tsx b/site/src/pages/AgentsPage/components/DiffViewer/DiffViewer.stories.tsx
index b64d15bd2d..32bfc30f61 100644
--- a/site/src/pages/AgentsPage/components/DiffViewer/DiffViewer.stories.tsx
+++ b/site/src/pages/AgentsPage/components/DiffViewer/DiffViewer.stories.tsx
@@ -402,3 +402,30 @@ export const CrossSideAdditionsToDeletions: Story = {
 	},
 	play: expectAnnotationTextarea,
 };
+
+// Rename diff with long file paths to verify that:
+// 1. The arrow between old and new names is vertically centered
+// 2. The stat-count pills remain visible (not clipped)
+// 3. File names truncate with ellipsis
+// biome-ignore format: raw diff string must preserve exact whitespace
+const renameDiff = [
+"diff --git a/site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx b/site/src/pages/AgentsPage/components/UsageLimitsTab/DefaultLimitSection.tsx",
+"similarity index 95%",
+"rename from site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx",
+"rename to site/src/pages/AgentsPage/components/UsageLimitsTab/DefaultLimitSection.tsx",
+"index abc1234..def5678 100644",
+"--- a/site/src/pages/AgentsPage/components/LimitsTab/DefaultLimitSection.tsx",
+"+++ b/site/src/pages/AgentsPage/components/UsageLimitsTab/DefaultLimitSection.tsx",
+"@@ -1,3 +1,3 @@",
+" export function DefaultLimitSection() {",
+"-  return null;",
+"+  return <div />;",
+" }",
+].join("\n");
+const renameFiles = parsePatchFiles(renameDiff).flatMap((p) => p.files);
+
+export const RenameWithLongPaths: Story = {
+	args: {
+		parsedFiles: renameFiles,
+	},
+};