From 05cafce1e8509bed0c044dfc874fe6b8cd5d0882 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Sat, 25 Feb 2023 13:02:09 -0800
Subject: [PATCH] Make the image editor scrollable as needed

Some users on 4K screens zoom in their browser display, but this causes the editor buttons on the top right to be out of view, and since the editor is not scrollable, they have to zoom out to be able to hit 'save'.

This change fixes that by making the image editor window vertically scrollable if it gets too large. No UI change on smaller screens (e.g. phones).
---
 ui/media/css/image-editor.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/media/css/image-editor.css b/ui/media/css/image-editor.css
index 3b88ee4a..d5b0cf84 100644
--- a/ui/media/css/image-editor.css
+++ b/ui/media/css/image-editor.css
@@ -149,16 +149,21 @@
 	pointer-events: none;
 }
 
-
 .image-editor-popup {
 	--popup-margin: 16px;
 	--popup-padding: 24px;
 }
 
+@media screen and (min-width: 700px) {
+	.image-editor-popup {
+		overflow-y: auto;
+	}
+}
+
 .image-editor-popup > div {
 	margin: var(--popup-margin);
 	padding: var(--popup-padding);
-	min-height: calc(100vh - (2 * var(--popup-margin)));
+	min-height: calc(99h - (2 * var(--popup-margin)));
 	max-width: none;
 	min-width: fit-content;
 }
@@ -186,7 +191,7 @@
 
 
 .image-editor-popup > div > div {
-	min-height: calc(100vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding)));
+	min-height: calc(99vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding)));
 }
 
 .inpainter .image_editor_color {