From dc5b5238c83c63b4d7814ba210da074ddc341213 Mon Sep 17 00:00:00 2001
From: Chris Rohrer <crohrer@users.noreply.github.com>
Date: Wed, 10 Jan 2024 02:50:47 +0100
Subject: [PATCH] fix: prevent cutting off overlay (#1829)

Co-authored-by: Christoph Rohrer <christoph.rohrer@odt.net>
---
 css/style.css        | 9 ++++++++-
 javascript/script.js | 5 +++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 6ebfd432..010c8e7f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -198,7 +198,8 @@
 }
 
 #stylePreviewOverlay {
-    display: none;
+    opacity: 0;
+    pointer-events: none;
     width: 128px;
     height: 128px;
     position: fixed;
@@ -208,6 +209,12 @@
     transform: translate(-140px, 20px);
     background-size: cover;
     background-position: center;
+    background-color: rgba(0, 0, 0, 0.3);
     border-radius: 5px;
     z-index: 100;
+    transition: transform 0.1s ease, opacity 0.3s ease;
+}
+
+#stylePreviewOverlay.lower-half {
+    transform: translate(-140px, -140px);
 }
diff --git a/javascript/script.js b/javascript/script.js
index d3d16ffb..8f4cac58 100644
--- a/javascript/script.js
+++ b/javascript/script.js
@@ -158,7 +158,7 @@ function initStylePreviewOverlay() {
         label.removeEventListener("mouseout", onMouseLeave);
         label.addEventListener("mouseout", onMouseLeave);
         overlayVisible = true;
-        overlay.style.display = "block";
+        overlay.style.opacity = "1";
         const originalText = label.querySelector("span").getAttribute("data-original-text");
         const name = originalText || label.querySelector("span").textContent;
         overlay.style.backgroundImage = `url("${samplesPath.replace(
@@ -167,7 +167,7 @@ function initStylePreviewOverlay() {
         ).replaceAll("\\", "\\\\")}")`;
         function onMouseLeave() {
             overlayVisible = false;
-            overlay.style.display = "none";
+            overlay.style.opacity = "0";
             overlay.style.backgroundImage = "";
             label.removeEventListener("mouseout", onMouseLeave);
         }
@@ -176,6 +176,7 @@ function initStylePreviewOverlay() {
         if(!overlayVisible) return;
         overlay.style.left = `${e.clientX}px`;
         overlay.style.top = `${e.clientY}px`;
+        overlay.className = e.clientY > window.innerHeight / 2 ? "lower-half" : "upper-half";
     });
 }