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.",
+ },
+ },
+ },
+};