webui: improve diff view comment box width and height handling
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sfafa36307f1bf673k
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index fa657f9..2ab89fa 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -340,7 +340,7 @@
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
padding: 12px;
z-index: 10001;
- width: 350px;
+ width: 600px;
animation: fadeIn 0.2s ease-in-out;
max-height: 80vh;
overflow-y: auto;
@@ -380,10 +380,20 @@
margin-bottom: 10px;
font-family: monospace;
font-size: 12px;
- max-height: 100px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
+ line-height: 1.4;
+ }
+
+ .selected-text-preview.small-selection {
+ /* For selections of 10 lines or fewer, ensure all content is visible */
+ max-height: none;
+ }
+
+ .selected-text-preview.large-selection {
+ /* For selections larger than 10 lines, limit height with scroll */
+ max-height: 280px; /* Approximately 10 lines at 12px font with 1.4 line-height */
}
.comment-textarea {
@@ -480,7 +490,9 @@
</div>
${this.selectedLines
? html`
- <div class="selected-text-preview">
+ <div
+ class="selected-text-preview ${this.getPreviewCssClass()}"
+ >
${this.selectedLines.text}
</div>
`
@@ -514,6 +526,21 @@
}
/**
+ * Get CSS class for selected text preview based on number of lines
+ */
+ private getPreviewCssClass(): string {
+ if (!this.selectedLines) {
+ return "large-selection";
+ }
+
+ // Count the number of lines in the selected text
+ const lineCount = this.selectedLines.text.split("\n").length;
+
+ // If 10 lines or fewer, show all content; otherwise, limit height
+ return lineCount <= 10 ? "small-selection" : "large-selection";
+ }
+
+ /**
* Close the comment box
*/
private closeCommentBox() {
@@ -635,9 +662,9 @@
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
- // Estimated box dimensions
- const boxWidth = 350;
- const boxHeight = 300;
+ // Estimated box dimensions (updated for wider box)
+ const boxWidth = 600;
+ const boxHeight = 400;
// Check if box would go off the right edge
if (screenLeft + boxWidth > viewportWidth) {