From 92f359c6fd7efa7a2f375ff71647f7a696935c98 Mon Sep 17 00:00:00 2001
From: Philip Zeyliger <philip@bold.dev>
Date: Sun, 11 Jan 2026 03:05:55 +0000
Subject: [PATCH] shelley/ui: fix Monaco diff gutter display on mobile for
 PatchTool

Prompt: In a new worktree reset to origin main and fix the weird formatting in the screenshot on Monaco diffs. Note how the left hitter looks like it's repeating part of the right.

The PatchTool component's Monaco diff editor was missing the CSS rules
to hide the gutter/margin on mobile devices. This caused the left gutter
area to display clipped content (showing partial text like the first
letter of each line).

Added the same mobile CSS rules that were already present for the
DiffViewer component to the PatchTool Monaco editor:
- Hide the margin and margin-view-overlays completely
- Adjust editor-scrollable and lines-content positioning
- Ensure the diff editor uses full width on mobile
---
 ui/src/styles.css | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/ui/src/styles.css b/ui/src/styles.css
index 4cf12073b92eb616137e0ac9ce293e2be9fc8d8e..102f0785dc084fc995e58eb5d923b89a17294a55 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -3184,6 +3184,35 @@ svg {
   .diff-viewer-comment-input {
     min-height: 60px;
   }
+
+  /* Patch Tool Monaco editor mobile styles - hide gutters completely */
+  .patch-tool-monaco-editor .monaco-editor .margin {
+    display: none !important;
+    width: 0 !important;
+  }
+
+  .patch-tool-monaco-editor .monaco-editor .margin-view-overlays {
+    display: none !important;
+    width: 0 !important;
+  }
+
+  .patch-tool-monaco-editor .monaco-editor .editor-scrollable {
+    left: 0 !important;
+  }
+
+  .patch-tool-monaco-editor .monaco-editor .lines-content {
+    margin-left: 0 !important;
+  }
+
+  /* Ensure patch tool diff editor uses full width */
+  .patch-tool-monaco-editor .monaco-diff-editor {
+    width: 100% !important;
+  }
+
+  .patch-tool-monaco-editor .monaco-diff-editor .editor.modified {
+    width: 100% !important;
+    left: 0 !important;
+  }
 }
 
 /* Injected text indicator (for diff comments) */