From 5bc25424d32e6bebc134babb49f9bdc5b216f41b Mon Sep 17 00:00:00 2001
From: Federico Jaramillo Martinez <federico@klingit.com>
Date: Fri, 22 May 2026 13:51:05 +0200
Subject: [PATCH] fix: extend chat diff backgrounds

---
 .changeset/fill-chat-diff-backgrounds.md       | 5 +++++
 src/client/src/components/ToolExecutionView.ts | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fill-chat-diff-backgrounds.md

diff --git a/.changeset/fill-chat-diff-backgrounds.md b/.changeset/fill-chat-diff-backgrounds.md
new file mode 100644
index 0000000..89b5d07
--- /dev/null
+++ b/.changeset/fill-chat-diff-backgrounds.md
@@ -0,0 +1,5 @@
+---
+"@jmfederico/pi-web": patch
+---
+
+Extend chat diff row backgrounds across the full horizontal scroll area.
diff --git a/src/client/src/components/ToolExecutionView.ts b/src/client/src/components/ToolExecutionView.ts
index 0d5da48..e573951 100644
--- a/src/client/src/components/ToolExecutionView.ts
+++ b/src/client/src/components/ToolExecutionView.ts
@@ -72,7 +72,7 @@ export class ToolExecutionView extends LitElement {
           <span>${truncated ? `Showing ${String(visibleLines.length)} of ${String(lines.length)} lines` : "Full diff"}</span>
           <button type="button" @click=${() => { void this.copyDiff(diff); }}>${this.copied ? "Copied" : "Copy diff"}</button>
         </div>
-        <pre class="diff" aria-label=${label}>${visibleLines.map((line) => html`<span class=${diffLineClass(line)}>${line}</span>`)}</pre>
+        <pre class="diff" aria-label=${label}><code class="diff-content">${visibleLines.map((line) => html`<span class=${diffLineClass(line)}>${line}</span>`)}</code></pre>
         ${truncated ? html`
           <button class="show-more" type="button" @click=${() => { this.showFullDiff = true; }}>
             Show all ${String(lines.length)} diff lines
@@ -128,6 +128,7 @@ export class ToolExecutionView extends LitElement {
     button { border: 1px solid var(--pi-border); border-radius: 6px; background: var(--pi-surface); color: var(--pi-text); padding: 3px 7px; font: 12px system-ui, sans-serif; cursor: pointer; }
     button:hover, button:focus { border-color: var(--pi-accent); }
     .diff { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border: 1px solid var(--pi-border-muted); border-radius: 7px; background: var(--pi-bg); padding: 8px 0; color: var(--pi-muted); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.45; }
+    .diff-content { display: block; width: max-content; min-width: 100%; }
     .diff span { display: block; min-height: 1.45em; padding: 0 8px; white-space: pre; }
     .diff .context { color: var(--pi-muted); }
     .diff .hunk { color: var(--pi-accent); }