From 96d1a2514389c2d450b57b12e2575888047c8565 Mon Sep 17 00:00:00 2001
From: aelassas <akram.elassas@gmail.com>
Date: Tue, 21 May 2024 18:32:55 +0100
Subject: [PATCH] Fix z-index issues

---
 backend/src/assets/css/agency.css          |  2 +-
 backend/src/assets/css/header.css          |  8 ++++++--
 backend/src/assets/css/location-list.css   |  1 -
 backend/src/assets/css/locations.css       |  1 -
 backend/src/components/Header.tsx          |  4 +++-
 backend/src/components/SimpleBackdrop.tsx  | 14 +++++++-------
 frontend/src/assets/css/header.css         |  4 ++++
 frontend/src/components/Header.tsx         |  4 +++-
 frontend/src/components/SimpleBackdrop.tsx |  4 ++--
 9 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/backend/src/assets/css/agency.css b/backend/src/assets/css/agency.css
index f447e41f..cba5eb3c 100644
--- a/backend/src/assets/css/agency.css
+++ b/backend/src/assets/css/agency.css
@@ -66,7 +66,7 @@ div.agency {
 
   .agency div.col-2 {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
   }
 }
 
diff --git a/backend/src/assets/css/header.css b/backend/src/assets/css/header.css
index 347946b9..8140ff97 100644
--- a/backend/src/assets/css/header.css
+++ b/backend/src/assets/css/header.css
@@ -6,6 +6,10 @@
   z-index: 101;
 }
 
+.menu {
+  z-index: 1401 !important;
+}
+
 .header-action {
   margin-right: 20px;
 }
@@ -21,7 +25,7 @@
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .header {
     min-height: 56px;
   }
@@ -33,7 +37,7 @@
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .header {
     min-height: 64px;
   }
diff --git a/backend/src/assets/css/location-list.css b/backend/src/assets/css/location-list.css
index 5d89e971..71ec67c0 100644
--- a/backend/src/assets/css/location-list.css
+++ b/backend/src/assets/css/location-list.css
@@ -1,6 +1,5 @@
 section.location-list {
   margin: 0 10px;
-  max-width: 500px;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/backend/src/assets/css/locations.css b/backend/src/assets/css/locations.css
index b2791d3c..9864368c 100644
--- a/backend/src/assets/css/locations.css
+++ b/backend/src/assets/css/locations.css
@@ -49,7 +49,6 @@ div.locations .info-box {
   div.locations div.col-2 {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     margin-top: 3px;
     padding: 1px;
   }
diff --git a/backend/src/components/Header.tsx b/backend/src/components/Header.tsx
index 0098ba30..2008f062 100644
--- a/backend/src/components/Header.tsx
+++ b/backend/src/components/Header.tsx
@@ -210,6 +210,7 @@ const Header = ({
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMenuOpen}
       onClose={handleMenuClose}
+      className="menu"
     >
       <MenuItem onClick={handleSettingsClick}>
         <SettingsIcon className="header-action" />
@@ -232,6 +233,7 @@ const Header = ({
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMobileMenuOpen}
       onClose={handleMobileMenuClose}
+      className="menu"
     >
       <MenuItem onClick={handleSettingsClick}>
         <SettingsIcon className="header-action" />
@@ -279,7 +281,7 @@ const Header = ({
             </IconButton>
           )}
           <>
-            <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose}>
+            <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose} className="menu">
               <List sx={classes.list}>
                 <ListItemLink href="/">
                   <ListItemIcon><DashboardIcon /></ListItemIcon>
diff --git a/backend/src/components/SimpleBackdrop.tsx b/backend/src/components/SimpleBackdrop.tsx
index 2ea4170e..9ae24f85 100644
--- a/backend/src/components/SimpleBackdrop.tsx
+++ b/backend/src/components/SimpleBackdrop.tsx
@@ -11,12 +11,12 @@ interface SimpleBackdropProps {
 }
 
 const SimpleBackdrop = ({ progress, text }: SimpleBackdropProps) => (
-    <div>
-      <Backdrop open sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}>
-        {progress && <CircularProgress color="inherit" sx={{ marginRight: 5 }} />}
-        <Typography color="inherit">{text}</Typography>
-      </Backdrop>
-    </div>
-  )
+  <div>
+    <Backdrop open sx={{ color: '#fff', zIndex: 1402 }}>
+      {progress && <CircularProgress color="inherit" sx={{ marginRight: 5 }} />}
+      <Typography color="inherit">{text}</Typography>
+    </Backdrop>
+  </div>
+)
 
 export default SimpleBackdrop
diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css
index d011b63b..ebd1d4ba 100644
--- a/frontend/src/assets/css/header.css
+++ b/frontend/src/assets/css/header.css
@@ -6,6 +6,10 @@
   z-index: 101;
 }
 
+.menu {
+  z-index: 1401 !important;
+}
+
 .header-action {
   margin-right: 20px;
 }
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 41547c69..d37447c5 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -209,6 +209,7 @@ const Header = ({
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMenuOpen}
       onClose={handleMenuClose}
+      className="menu"
     >
       <MenuItem onClick={handleSettingsClick}>
         <SettingsIcon className="header-action" />
@@ -231,6 +232,7 @@ const Header = ({
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMobileMenuOpen}
       onClose={handleMobileMenuClose}
+      className="menu"
     >
       <MenuItem onClick={handleSettingsClick}>
         <SettingsIcon className="header-action" />
@@ -283,7 +285,7 @@ const Header = ({
               </IconButton>
             )}
             <>
-              <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose}>
+              <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose} className="menu">
                 <List sx={classes.list}>
                   <ListItemLink href="/">
                     <ListItemIcon><HomeIcon /></ListItemIcon>
diff --git a/frontend/src/components/SimpleBackdrop.tsx b/frontend/src/components/SimpleBackdrop.tsx
index 19c955b0..59cdfac9 100644
--- a/frontend/src/components/SimpleBackdrop.tsx
+++ b/frontend/src/components/SimpleBackdrop.tsx
@@ -12,11 +12,11 @@ interface SimpleBackdropProps {
 
 const SimpleBackdrop = ({ progress, text }: SimpleBackdropProps) => (
   <div>
-    <Backdrop open sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+    <Backdrop open sx={{ color: '#fff', zIndex: 1402 }}>
       {progress && <CircularProgress color="inherit" sx={{ marginRight: 5 }} />}
       <Typography color="inherit">{text}</Typography>
     </Backdrop>
   </div>
-  )
+)
 
 export default SimpleBackdrop