fixed zindex of modal dialogues (eg sharingmanager) to be above doc decorations.

2 files changed, 39 insertions, 35 deletions

diff --git a/src/client/views/MainViewModal.scss b/src/client/views/MainViewModal.scss
index 812fe540b..5f19590b4 100644
--- a/src/client/views/MainViewModal.scss
+++ b/src/client/views/MainViewModal.scss
@@ -1,26 +1,34 @@
-.dialogue-box {
+.mainViewModal-cont {
+    pointer-events: all;
     position: absolute;
-    z-index: 1000;
-    text-align: center;
-    justify-content: center;
-    align-self: center;
-    align-content: center;
-    padding: 20px;
-    // background: gainsboro;
-    background: white;
-    border-radius: 10px;
-    border: 0.5px solid black;
-    box-shadow: #00000044 5px 5px 10px;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    transition: 0.5s all ease;
-}
-
-.overlay {
+    z-index: 10000;
     width: 100%;
     height: 100%;
-    position: absolute;
-    z-index: 999;
-    transition: 0.5s all ease;
+    .dialogue-box {
+        position: absolute;
+        z-index: 1000;
+        text-align: center;
+        justify-content: center;
+        align-self: center;
+        align-content: center;
+        padding: 20px;
+        // background: gainsboro;
+        background: white;
+        border-radius: 10px;
+        border: 0.5px solid black;
+        box-shadow: #00000044 5px 5px 10px;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        transition: 0.5s all ease;
+    }
+
+    .overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 999;
+        transition: 0.5s all ease;
+    }
+
 }
\ No newline at end of file
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index 34e0ff126..7f91c0079 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -21,19 +21,17 @@ export class MainViewModal extends React.Component<MainViewOverlayProps> {
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
         const overlayOpacity = p.overlayDisplayedOpacity || 0.4;
         return !p.isDisplayed ? (null) : (
-            <div style={{
+            <div className="mainViewModal-cont" style={{
                 pointerEvents: p.isDisplayed && p.interactive ? "all" : "none"
             }}>
-                <div
-                    className={"dialogue-box"}
-                    style={{
-                        borderColor: "black",
-                        ...(p.dialogueBoxStyle || {}),
-                        opacity: p.isDisplayed ? dialogueOpacity : 0
-                    }}
-                >{p.contents}</div>
-                <div
-                    className={"overlay"}
+                <div className="dialogue-box" style={{
+                    borderColor: "black",
+                    ...(p.dialogueBoxStyle || {}),
+                    opacity: p.isDisplayed ? dialogueOpacity : 0
+                }} >
+                    {p.contents}
+                </div>
+                <div className="overlay"
                     onClick={this.props?.closeOnExternalClick}
                     style={{
                         backgroundColor: "gainsboro",
@@ -44,6 +42,4 @@ export class MainViewModal extends React.Component<MainViewOverlayProps> {
             </div>
         );
     }
-
-
 }
\ No newline at end of file