zi

web/apps/accounts/src/pages/_app.tsx

@@ -56,7 +56,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
             <ThemeProvider theme={getTheme(THEME_COLOR.DARK, "photos")}>
                 <CssBaseline enableColorScheme />
                 <MiniDialog
-                    sx={{ zIndex: 1600 }}
                     open={dialogBoxV2View}
                     onClose={closeDialogBoxV2}
                     attributes={dialogBoxAttributeV2}

web/apps/auth/src/pages/_app.tsx

@@ -168,7 +168,6 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                 <LoadingBar color="#51cd7c" ref={loadingBar} />
 
                 <MiniDialog
-                    sx={{ zIndex: 1600 }}
                     open={dialogBoxV2View}
                     onClose={closeDialogBoxV2}
                     attributes={dialogBoxAttributeV2}

web/apps/photos/src/components/Collections/AlbumCastDialog.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { boxSeal } from "@/base/crypto/libsodium";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
+import { photosDialogZIndex } from "@/new/photos/components/z-index";
 import { loadCast } from "@/new/photos/utils/chromecast-sender";
 import SingleInputForm, {
     type SingleInputFormProps,
@@ -139,7 +140,7 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
             open={open}
             onClose={onClose}
             title={t("cast_album_to_tv")}
-            sx={{ zIndex: 1600 }}
+            sx={{ zIndex: photosDialogZIndex }}
         >
             {view == "choose" && (
                 <Stack sx={{ py: 1, gap: 4 }}>

web/apps/photos/src/components/FilesDownloadProgress.tsx

@@ -1,3 +1,4 @@
+import { photosDialogZIndex } from "@/new/photos/components/z-index";
 import { AppContext } from "@/new/photos/types/context";
 import Notification from "components/Notification";
 import { t } from "i18next";
@@ -123,7 +124,7 @@ export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
                     horizontal="left"
                     sx={{
                         "&&": { bottom: `${index * 80 + 20}px` },
-                        zIndex: 1600,
+                        zIndex: photosDialogZIndex,
                     }}
                     open={isFilesDownloadStarted(attributes)}
                     onClose={handleClose(attributes)}

web/apps/photos/src/components/PhotoViewer/FileInfo/FileNameEditDialog.tsx

@@ -1,4 +1,5 @@
 import { TitledMiniDialog } from "@/base/components/MiniDialog";
+import { photosDialogZIndex } from "@/new/photos/components/z-index";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";
@@ -24,7 +25,7 @@ export const FileNameEditDialog = ({
     };
     return (
         <TitledMiniDialog
-            sx={{ zIndex: 1600 }}
+            sx={{ zIndex: photosDialogZIndex }}
             open={isInEditMode}
             onClose={closeEditMode}
             title={t("rename_file")}

web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx

@@ -18,7 +18,7 @@ import {
     UnclusteredFaceList,
 } from "@/new/photos/components/PeopleList";
 import { PhotoDateTimePicker } from "@/new/photos/components/PhotoDateTimePicker";
-import { photoSwipeZIndex } from "@/new/photos/components/PhotoViewer";
+import { fileInfoDrawerZIndex } from "@/new/photos/components/z-index";
 import { tagNumericValue, type RawExifTags } from "@/new/photos/services/exif";
 import {
     AnnotatedFacesForFile,
@@ -382,7 +382,7 @@ const parseExifInfo = (
 const FileInfoSidebar = styled((props: DialogProps) => (
     <EnteDrawer {...props} anchor="right" />
 ))({
-    zIndex: photoSwipeZIndex + 1,
+    zIndex: fileInfoDrawerZIndex,
     "& .MuiPaper-root": {
         padding: 8,
     },

web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx

@@ -6,6 +6,7 @@ import {
 } from "@/base/components/Menu";
 import { nameAndExtension } from "@/base/file";
 import log from "@/base/log";
+import { photosDialogZIndex } from "@/new/photos/components/z-index";
 import downloadManager from "@/new/photos/services/download";
 import { AppContext } from "@/new/photos/types/context";
 import { EnteFile } from "@/new/photos/types/file";
@@ -522,7 +523,7 @@ const ImageEditorOverlay = (props: IProps) => {
             <Backdrop
                 sx={{
                     background: "#000",
-                    zIndex: 1600,
+                    zIndex: photosDialogZIndex,
                     width: "100%",
                 }}
                 open

web/apps/photos/src/pages/_app.tsx

@@ -11,6 +11,7 @@ import {
     logUnhandledErrorsAndRejections,
 } from "@/base/log-web";
 import { AppUpdate } from "@/base/types/ipc";
+import { photosDialogZIndex } from "@/new/photos/components/z-index";
 import DownloadManager from "@/new/photos/services/download";
 import { runMigrations } from "@/new/photos/services/migrations";
 import { initML, isMLSupported } from "@/new/photos/services/ml";
@@ -301,14 +302,14 @@ export default function App({ Component, pageProps }: AppProps) {
                 <LoadingBar color="#51cd7c" ref={loadingBar} />
 
                 <DialogBox
-                    sx={{ zIndex: 1600 }}
+                    sx={{ zIndex: photosDialogZIndex }}
                     size="xs"
                     open={messageDialogView}
                     onClose={closeMessageDialog}
                     attributes={dialogMessage}
                 />
                 <MiniDialog
-                    sx={{ zIndex: 1600 }}
+                    sx={{ zIndex: photosDialogZIndex }}
                     open={dialogBoxV2View}
                     onClose={closeDialogBoxV2}
                     attributes={dialogBoxAttributeV2}

web/packages/new/photos/components/PhotoDateTimePicker.tsx

@@ -1,5 +1,4 @@
 import type { ParsedMetadataDate } from "@/media/file-metadata";
-import { photoSwipeZIndex } from "@/new/photos/components/PhotoViewer";
 import {
     LocalizationProvider,
     MobileDateTimePicker,
@@ -7,6 +6,7 @@ import {
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs, { Dayjs } from "dayjs";
 import React, { useState } from "react";
+import { fileInfoDrawerZIndex } from "./z-index";
 
 interface PhotoDateTimePickerProps {
     /**
@@ -105,7 +105,7 @@ export const PhotoDateTimePicker: React.FC<PhotoDateTimePickerProps> = ({
                        photo viewer and the info drawer */
                     dialog: {
                         sx: {
-                            zIndex: photoSwipeZIndex + 2,
+                            zIndex: fileInfoDrawerZIndex + 1,
                         },
                     },
                 }}

web/packages/new/photos/components/z-index.tsx

@@ -3,3 +3,15 @@
  * than that for our drawers and dialogs to get them to show above it.
  */
 export const photoSwipeZIndex = 1500;
+
+/**
+ * The file info drawer needs to be higher than the photo viewer.
+ */
+export const fileInfoDrawerZIndex = photoSwipeZIndex + 1;
+
+/**
+ * Dialogs (not necessarily always) need to be higher still so to ensure they
+ * are visible above the drawer in case they are shown in response to some
+ * action taken in the file info drawer.
+ */
+export const photosDialogZIndex = 1600;