shelley/ui: fix Monaco diff gutter display on mobile for PatchTool

Philip Zeyliger created 4 months ago

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

Change summary

ui/src/styles.css | 29 +++++++++++++++++++++++++++++
1 file changed, 29 insertions(+)

Detailed changes

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) */