diff --git a/src/browser/components/shared/DiffRenderer.tsx b/src/browser/components/shared/DiffRenderer.tsx index 0c9817f23c..8b6c1f48f4 100644 --- a/src/browser/components/shared/DiffRenderer.tsx +++ b/src/browser/components/shared/DiffRenderer.tsx @@ -285,8 +285,9 @@ export const DiffContainer: React.FC< : "8px"; // Padding strip mirrors gutter/content background split of diff lines + // Must use font-monospace so ch units match DiffLineGutter's character widths const PaddingStrip = ({ lineType }: { lineType?: DiffLineType }) => ( -
+
( + + setupSimpleChatStory({ + workspaceId: "ws-diff-alignment", + messages: [ + createUserMessage("msg-1", "Show me a diff with high line numbers", { + historySequence: 1, + timestamp: STABLE_TIMESTAMP - 100000, + }), + createAssistantMessage( + "msg-2", + "Here's a diff ending with deletions at high line numbers:", + { + historySequence: 2, + timestamp: STABLE_TIMESTAMP - 90000, + toolCalls: [ + // Diff with 3-digit line numbers ending in deletions + // Replicates the alignment issue from code review diffs + createFileEditTool( + "call-1", + "src/ppo/train/config.rs", + [ + "--- src/ppo/train/config.rs", + "+++ src/ppo/train/config.rs", + "@@ -374,7 +374,3 @@", + " adj = LR_INCREASE_ADJ;", + " }", + " ", + "- // Slow down learning rate when we're too stale.", + "- if last_metrics.stop_reason == metrics::StopReason::TooStale {", + "- adj = LR_DECREASE_ADJ;", + "- }", + ].join("\n") + ), + ], + } + ), + ], + }) + } + /> + ), + parameters: { + docs: { + description: { + story: + "Verifies diff padding alignment with 3-digit line numbers. " + + "The bottom red padding strip should align exactly with the gutter/content boundary. " + + "Before the fix, the padding strip used ch units without font-monospace, " + + "causing misalignment that scaled with line number width.", + }, + }, + }, +};