From 58b879e85d89012f6da55f340df1615a34b50bcd Mon Sep 17 00:00:00 2001
From: frostyfan109 <groupe@renci.org>
Date: Tue, 27 Feb 2024 16:58:10 -0500
Subject: [PATCH] Improve dom mask

---
 src/hooks/use-synthetic-dom-mask.tsx | 7 +++----
 src/index.css                        | 1 +
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/use-synthetic-dom-mask.tsx b/src/hooks/use-synthetic-dom-mask.tsx
index 8477f247..10819627 100644
--- a/src/hooks/use-synthetic-dom-mask.tsx
+++ b/src/hooks/use-synthetic-dom-mask.tsx
@@ -4,7 +4,7 @@ import { v4 as uuid } from 'uuid'
 const prepareMaskContainer = (): HTMLDivElement => {
     const mask = document.createElement("div")
     mask.id = "mask-" + uuid()
-    mask.style.position = "relative"
+    mask.style.position = "absolute"
     mask.style.zIndex = "999999"
     mask.style.pointerEvents = "none"
     mask.style.borderRadius = "4px"
@@ -69,7 +69,7 @@ export const useSyntheticDOMMask = (
         }
     }, [selector, selectorInterval])
 
-    // Make sure the mask displays properly and maintain proper position/size
+    // Make sure the mask displays properly and maintains correct position/size
     useEffect(() => {
         const observers: IntersectionObserver[] = []
         let interval: number
@@ -77,7 +77,7 @@ export const useSyntheticDOMMask = (
         if (!mask || !elementMasks) return
         if (!show) mask.style.display = "none"
         else {
-            mask.style.display = "initial"
+            mask.style.display = "block"
             
             const resizeMasks = () => {
                 const elements = Array.from(elementMasks.keys())
@@ -104,7 +104,6 @@ export const useSyntheticDOMMask = (
 
             Array.from(elementMasks.keys()).forEach((element) => {
                 const elementMask = elementMasks.get(element)!
-                elementMask.style.backgroundColor = "red"
             })
 
             /*
diff --git a/src/index.css b/src/index.css
index 39dd4549..f7731a43 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,7 @@ body {
   /* font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji; */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  position: relative;
 }
 
 code {