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
;", +" }", +].join("\n"); +const renameFiles = parsePatchFiles(renameDiff).flatMap((p) => p.files); + +export const RenameWithLongPaths: Story = { + args: { + parsedFiles: renameFiles, + }, +};