Skip to content

Commit 7874ab9

Browse files
koki-developclaude
andcommitted
fix: Improve diff line number alignment in EditAction
Calculate maximum line number width and pad all line numbers for consistent alignment in diff display. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 9e23c31 commit 7874ab9

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

src/components/EditAction.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,30 @@ interface EditActionProps {
1010
const formatDiffs = (diffs: EditActionType["diff"]["diffs"]): string => {
1111
const lines: string[] = [];
1212

13+
// Calculate max line number width for alignment
14+
const maxLineNumber = Math.max(...diffs.map((d) => d.rowNumber));
15+
const lineNumberWidth = maxLineNumber.toString().length;
16+
1317
for (let i = 0; i < diffs.length; i++) {
1418
const diff = diffs[i];
1519
const nextDiff = diffs[i + 1];
1620

1721
if (!diff) continue;
1822

23+
const paddedLineNumber = diff.rowNumber
24+
.toString()
25+
.padStart(lineNumberWidth, " ");
26+
1927
// Deleted line
2028
if (diff.a !== "") {
2129
lines.push(
22-
`${chalk.gray(diff.rowNumber)} ${chalk.bgAnsi256(52)(`- ${diff.a}`)}`,
30+
`${chalk.gray(paddedLineNumber)} ${chalk.bgAnsi256(52)(`- ${diff.a}`)}`,
2331
);
2432
}
2533
// Added line
2634
if (diff.b !== "") {
2735
lines.push(
28-
`${chalk.gray(diff.rowNumber)} ${chalk.bgAnsi256(22)(`+ ${diff.b}`)}`,
36+
`${chalk.gray(paddedLineNumber)} ${chalk.bgAnsi256(22)(`+ ${diff.b}`)}`,
2937
);
3038
}
3139

0 commit comments

Comments
 (0)