Fix z-index issues

aelassas · May 21, 2024 · 96d1a25 · 96d1a25
1 parent 8ec1474
commit 96d1a25
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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