commit 6b8b7660f2e2e964453ebace40dda7122f6d9eca
author philip.zeyliger <philip.zeyliger@gmail.com> Mon Jun 16 03:06:30 2025 +0000
committer Philip Zeyliger <philip@bold.dev> Mon Jun 16 21:30:06 2025 -0700
tree dcb6ba6d5a2d18fcffe8d44d6960bd41fd29121c
parent 7c1a687d03341b94b4a3c71706c47e3e14927707

webui: add mobile diff view with Monaco inline diffing

Thanks, Sketch. There are still some rough edges, but it's not bad.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: se4f6567dc0dabd31k

webui/src/web-components/sketch-monaco-view.ts

diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index e15f3c9..6e783fa 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -135,6 +135,10 @@
   // Editable state
   @property({ type: Boolean, attribute: "editable-right" })
   editableRight?: boolean;
+
+  // Inline diff mode (for mobile)
+  @property({ type: Boolean, attribute: "inline" })
+  inline?: boolean;
   private container: Ref<HTMLElement> = createRef();
   editor?: monaco.editor.IStandaloneDiffEditor;
 
@@ -704,7 +708,7 @@
           automaticLayout: false, // We'll resize manually
           readOnly: true,
           theme: "vs", // Always use light mode
-          renderSideBySide: true,
+          renderSideBySide: !this.inline,
           ignoreTrimWhitespace: false,
           renderOverviewRuler: false, // Disable the overview ruler
           scrollbar: {