🤖 fix: diff padding strip font alignment (#1159)

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

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

## Verification
The `DiffPaddingColors` story demonstrates diffswith colored padding
(additions at top, deletions at bottom). Before the fix, the colored
padding strip edge was misaligned with the line number gutter.

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking:
`high`_

Author: ammar-agent

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={{

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