From ced4729df3be9151281dfe83429be80617f55b31 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Sun, 14 Dec 2025 19:12:08 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20diff=20padding=20strip=20?=
 =?UTF-8?q?font=20alignment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The PaddingStrip component used ch units in gutterWidth calculation
but lacked font-monospace class. Since ch units are relative to the
font's character width, the padding strip was misaligned with the
actual DiffLineGutter which uses font-monospace.

Add font-monospace to PaddingStrip so ch units match DiffLineGutter.

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_
---
 .../components/shared/DiffRenderer.tsx        |  3 +-
 src/browser/stories/App.chat.stories.tsx      | 62 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

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 }) => (
-    <div className="flex h-1.5">
+    <div className="font-monospace flex h-1.5">
       <div
         className="shrink-0"
         style={{
diff --git a/src/browser/stories/App.chat.stories.tsx b/src/browser/stories/App.chat.stories.tsx
index 09459bca98..0d2d5bf0b0 100644
--- a/src/browser/stories/App.chat.stories.tsx
+++ b/src/browser/stories/App.chat.stories.tsx
@@ -848,3 +848,65 @@ export const DiffPaddingColors: AppStory = {
     },
   },
 };
+
+/**
+ * Story to verify diff padding alignment with high line numbers.
+ * The ch unit misalignment bug is more visible with 3-digit line numbers.
+ * The colored padding strip should align perfectly with the gutter edge.
+ */
+export const DiffPaddingAlignment: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() =>
+        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.",
+      },
+    },
+  },
+};