From 2641c072950b373289614da3e3d31d7476c9c0b5 Mon Sep 17 00:00:00 2001
From: kali-linex <87038059+kali-linex@users.noreply.github.com>
Date: Sun, 23 Apr 2023 09:53:13 +0200
Subject: [PATCH] Simple patch for high-DPR devices

---
 web/scripts/app.js     | 15 +++++++++++----
 web/scripts/widgets.js | 10 +++++-----
 web/style.css          | 12 ++----------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/web/scripts/app.js b/web/scripts/app.js
index f158f3457..49df5b27b 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -755,11 +755,18 @@ export class ComfyApp {
 
 		this.graph.start();
 
-		function resizeCanvas() {
-			canvasEl.width = canvasEl.offsetWidth;
-			canvasEl.height = canvasEl.offsetHeight;
+		const resizeCanvas = () => {
+			const sc = window.devicePixelRatio;
+			const w = canvasEl.offsetWidth;
+			const h = canvasEl.offsetHeight;
+			canvasEl.width = Math.floor(sc * w);
+			canvasEl.height = Math.floor(sc * h);
+			canvasEl.style.width = `${w}px`;
+			canvasEl.style.height = `${h}px`;
+			this.scale = window.devicePixelRatio;
+			this.ctx.scale(this.scale, this.scale);
 			canvas.draw(true, true);
-		}
+		};
 
 		// Ensure the canvas fills the window
 		resizeCanvas();
diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js
index 2acc5f2c0..eb2548ea0 100644
--- a/web/scripts/widgets.js
+++ b/web/scripts/widgets.js
@@ -133,13 +133,13 @@ function addMultilineWidget(node, name, opts, app) {
 			const t = ctx.getTransform();
 			const margin = 10;
 			Object.assign(this.inputEl.style, {
-				left: `${t.a * margin + t.e}px`,
-				top: `${t.d * (y + widgetHeight - margin - 3) + t.f}px`,
-				width: `${(widgetWidth - margin * 2 - 3) * t.a}px`,
-				height: `${(this.parent.inputHeight - margin * 2 - 4) * t.d}px`,
+				left: `${(t.a * margin + t.e) / window.devicePixelRatio}px`,
+				top: `${(t.d * (y + widgetHeight - margin - 3) + t.f) / window.devicePixelRatio}px`,
+				width: `${(widgetWidth - margin * 2 - 3) * t.a / window.devicePixelRatio}px`,
+				height: `${(this.parent.inputHeight - margin * 2 - 4) * t.d / window.devicePixelRatio}px`,
 				position: "absolute",
 				zIndex: 1,
-				fontSize: `${t.d * 10.0}px`,
+				fontSize: `${t.d * 10.0 / window.devicePixelRatio}px`,
 			});
 			this.inputEl.hidden = !visible;
 		},
diff --git a/web/style.css b/web/style.css
index 2cbf02c0c..cab7e8528 100644
--- a/web/style.css
+++ b/web/style.css
@@ -217,14 +217,6 @@ button.comfy-queue-btn {
 	z-index: 99;
 }
 
-.comfy-modal.comfy-settings input[type="range"] {
-	vertical-align: middle;
-}
-
-.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
-	width: 3.5em;
-}
-
 .comfy-modal input,
 .comfy-modal select {
 	color: var(--input-text);
@@ -237,9 +229,9 @@ button.comfy-queue-btn {
 
 @media only screen and (max-height: 850px) {
 	.comfy-menu {
-		top: 0 !important;
+		top: auto !important;
 		bottom: 0 !important;
-		left: auto !important;
+		left: 0 !important;
 		right: 0 !important;
 		border-radius: 0px;
 	}