Fix z-index conflicts between normal elements, context menu, and di…

…alog (#168) * fix? * better comment
rohanshiva · Jan 7, 2024 · e72af1c · e72af1c
1 parent 4b1ecf5
commit e72af1c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 1 deletion.
diff --git a/client/src/App.css b/client/src/App.css
@@ -1,6 +1,8 @@
 .app {
   display: flex;
   flex-direction: column;
+  /* All elements are at z-index 0; unless overwritten */
+  z-index: 0;
 }
 
 .main-section {

diff --git a/client/src/components/dialog/Dialog.css b/client/src/components/dialog/Dialog.css
@@ -2,6 +2,8 @@
   position: fixed;
   inset: 0px;
   backdrop-filter: blur(0.2rem);
+  /* Dialog needs to be the top most layer */
+  z-index: 999;
 }
 
 .dialog-header {
@@ -27,4 +29,6 @@ dialog {
   position: absolute;
   inset: 0px;
   padding: 1rem 2rem;
+  /* Dialog needs to be the top most layer */
+  z-index: 999;
 }
diff --git a/client/src/components/home/Home.css b/client/src/components/home/Home.css
@@ -64,7 +64,6 @@ input[type="submit"]:hover {
   border-radius: 1rem;
   height: 512px;
   width: 100%;
-  z-index: -1;
   display: flex;
   justify-content: flex-end;
 }

diff --git a/client/src/index.css b/client/src/index.css
@@ -136,6 +136,8 @@ video {
   border-radius: 0.2rem;
   background-color: var(--bg);
   border: 0.1rem solid var(--border);
+  /* Context menu is a layer above all other elements, but below dialog (see Dialog's CSS classes) */
+  z-index: 1;
 }
 
 .context-menu-container {