fix https://github.com/boldsoftware/sketch/issues/186
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 927f2ac..fb8ed31 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -188,7 +188,7 @@
border: 0 !important;
z-index: -1 !important;
}
-
+
/* Aggressively hide all Monaco scrollbar elements */
.monaco-editor .scrollbar,
.monaco-editor .scroll-decoration,
@@ -208,7 +208,7 @@
height: 0 !important;
opacity: 0 !important;
}
-
+
/* Target the specific scrollbar classes that Monaco uses */
.monaco-scrollable-element > .scrollbar,
.monaco-scrollable-element > .scroll-decoration,
@@ -218,7 +218,7 @@
width: 0 !important;
height: 0 !important;
}
-
+
/* Remove scrollbar space/padding from content area */
.monaco-editor .monaco-scrollable-element,
.monaco-diff-editor .monaco-scrollable-element {
@@ -227,17 +227,36 @@
margin-right: 0 !important;
margin-bottom: 0 !important;
}
-
+
/* Ensure the diff content takes full width without scrollbar space */
.monaco-diff-editor .editor.modified,
.monaco-diff-editor .editor.original {
margin-right: 0 !important;
padding-right: 0 !important;
}
- `;
+ `;
document.head.appendChild(styleElement);
}
+ // Override createRenderRoot to apply host styles for proper sizing while still using light DOM
+ createRenderRoot() {
+ // Use light DOM like SketchTailwindElement but still apply host styles
+ const style = document.createElement("style");
+ style.textContent = `
+ sketch-diff2-view {
+ height: -webkit-fill-available;
+ }
+ `;
+
+ // Add the style to the document head if not already present
+ if (!document.head.querySelector("style[data-sketch-diff2-view]")) {
+ style.setAttribute("data-sketch-diff2-view", "");
+ document.head.appendChild(style);
+ }
+
+ return this;
+ }
+
connectedCallback() {
super.connectedCallback();
// Initialize with default range and load data