From f083a09b86a416f378a95483caa7fafa9ee31046 Mon Sep 17 00:00:00 2001
From: AlexisG <merkkur39@gmail.com>
Date: Fri, 25 Oct 2024 10:06:00 +0200
Subject: [PATCH] fix: Always keep the Viewer modal behind the others

We had recently encountered the same z-index problem,
but the correction brought this regression.
A more global fix for cozy-viewer may be in order in the future.
---
 src/components/Viewer/FilesViewer.jsx    | 9 +++++++++
 src/components/Views/InformationEdit.jsx | 4 ----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Viewer/FilesViewer.jsx b/src/components/Viewer/FilesViewer.jsx
index 2d0ab0f1..5d918eb8 100644
--- a/src/components/Viewer/FilesViewer.jsx
+++ b/src/components/Viewer/FilesViewer.jsx
@@ -21,6 +21,9 @@ const styleStatusBar = switcher => {
   }
 }
 
+// Keep the Dialog behind the others Dialogs
+const viewerStyle = { zIndex: 'calc(var(--zIndex-modal) - 1)' }
+
 const FilesViewer = ({ filesQuery, files, fileId, onClose, onChange }) => {
   const [currentFile, setCurrentFile] = useState(null)
   const [fetchingMore, setFetchingMore] = useState(false)
@@ -122,6 +125,12 @@ const FilesViewer = ({ filesQuery, files, fileId, onClose, onChange }) => {
 
   return (
     <Viewer
+      componentsProps={{
+        modalProps: {
+          open: true,
+          style: viewerStyle
+        }
+      }}
       files={viewerFiles}
       currentIndex={viewerIndex}
       onChangeRequest={handleOnChange}
diff --git a/src/components/Views/InformationEdit.jsx b/src/components/Views/InformationEdit.jsx
index 8a864ada..4ffb62ce 100644
--- a/src/components/Views/InformationEdit.jsx
+++ b/src/components/Views/InformationEdit.jsx
@@ -23,9 +23,6 @@ import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-// Keep the Dialog above the Viewer
-const fixedDialogStyle = { zIndex: 'var(--zIndex-modal-footer)' }
-
 const InformationEdit = () => {
   const { fileId } = useParams()
   const client = useClient()
@@ -112,7 +109,6 @@ const InformationEdit = () => {
     <FixedDialog
       open
       onClose={onClose}
-      style={fixedDialogStyle}
       title={dialogTitle}
       content={
         <div