mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
fix(site): fix DiffViewer rename header layout (#23540)
This commit is contained in:
@@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user