fix(site): fix DiffViewer rename header layout (#23540)

This commit is contained in:
Danielle Maywood
2026-03-24 22:41:39 +00:00
committed by GitHub
parent 3812b504fc
commit 01aa149fa3
2 changed files with 30 additions and 1 deletions
@@ -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;",
@@ -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,
},
};