From b16d65741ca3cff9bbf3b2217cf0e394d4f5ee44 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Fri, 20 Oct 2023 16:15:17 +0200
Subject: [PATCH] UI - Visual Selector should be the same page-size as Browser
 Steps (fit inside the browser viewport)

---
 .../styles/scss/parts/_visualselector.scss    | 28 +++++++++++++++++++
 .../static/styles/scss/styles.scss            | 27 +-----------------
 changedetectionio/static/styles/styles.css    |  1 +
 3 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 changedetectionio/static/styles/scss/parts/_visualselector.scss

diff --git a/changedetectionio/static/styles/scss/parts/_visualselector.scss b/changedetectionio/static/styles/scss/parts/_visualselector.scss
new file mode 100644
index 000000000..d0608c0c6
--- /dev/null
+++ b/changedetectionio/static/styles/scss/parts/_visualselector.scss
@@ -0,0 +1,28 @@
+
+#selector-wrapper {
+  height: 100%;
+  max-height: 70vh;
+  overflow-y: scroll;
+  position: relative;
+
+  //width: 100%;
+  >img {
+    position: absolute;
+    z-index: 4;
+    max-width: 100%;
+  }
+
+  >canvas {
+    position: relative;
+    z-index: 5;
+    max-width: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+#selector-current-xpath {
+  font-size: 80%;
+}
\ No newline at end of file
diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss
index 54b3bd54f..f5ae8a9f8 100644
--- a/changedetectionio/static/styles/scss/styles.scss
+++ b/changedetectionio/static/styles/scss/styles.scss
@@ -943,32 +943,7 @@ ul {
   }
 }
 
-#selector-wrapper {
-  height: 100%;
-  overflow-y: scroll;
-  position: relative;
-
-  //width: 100%;
-  >img {
-    position: absolute;
-    z-index: 4;
-    max-width: 100%;
-  }
-
-  >canvas {
-    position: relative;
-    z-index: 5;
-    max-width: 100%;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-#selector-current-xpath {
-  font-size: 80%;
-}
+@import "parts/_visualselector";
 
 #webdriver-override-options {
   input[type="number"] {
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index 785f4d2f4..8898b014e 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -980,6 +980,7 @@ ul {
 
 #selector-wrapper {
   height: 100%;
+  max-height: 70vh;
   overflow-y: scroll;
   position: relative; }
   #selector-wrapper > img {