Remove no longer needed zi workarounds

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

@@ -4,7 +4,6 @@ import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
 import { useSettingsSnapshot } from "@/new/photos/components/utils/use-snapshot";
-import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
 import {
     publishCastPayload,
     revokeAllCastTokens,
@@ -130,12 +129,7 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
     }, [open]);
 
     return (
-        <TitledMiniDialog
-            open={open}
-            onClose={onClose}
-            title={t("cast_album_to_tv")}
-            sx={{ zIndex: aboveFileViewerContentZ }}
-        >
+        <TitledMiniDialog {...{ open, onClose }} title={t("cast_album_to_tv")}>
             {view == "choose" && (
                 <Stack sx={{ py: 1, gap: 4 }}>
                     {browserCanCast && (

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

@@ -1,6 +1,5 @@
 import { useBaseContext } from "@/base/context";
 import { Notification } from "@/new/photos/components/Notification";
-import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
 import { t } from "i18next";
 import { GalleryContext } from "pages/gallery";
 import { useContext } from "react";
@@ -118,10 +117,7 @@ export const FilesDownloadProgress: React.FC<FilesDownloadProgressProps> = ({
                 <Notification
                     key={attributes.id}
                     horizontal="left"
-                    sx={{
-                        "&&": { bottom: `${index * 80 + 20}px` },
-                        zIndex: aboveFileViewerContentZ,
-                    }}
+                    sx={{ "&&": { bottom: `${index * 80 + 20}px` } }}
                     open={isFilesDownloadStarted(attributes)}
                     onClose={handleClose(attributes)}
                     keepOpenOnClick

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

@@ -24,7 +24,6 @@ import {
     updateReadyToInstallDialogAttributes,
 } from "@/new/photos/components/utils/download";
 import { useLoadingBar } from "@/new/photos/components/utils/use-loading-bar";
-import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
 import { runMigrations } from "@/new/photos/services/migration";
 import { initML, isMLSupported } from "@/new/photos/services/ml";
 import { getFamilyPortalRedirectURL } from "@/new/photos/services/user-details";
@@ -168,13 +167,9 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
         <ThemeProvider theme={photosTheme}>
             <CustomHead {...{ title }} />
             <CssBaseline enableColorScheme />
+
             <ThemedLoadingBar ref={loadingBarRef} />
-
-            <AttributedMiniDialog
-                sx={{ zIndex: aboveFileViewerContentZ }}
-                {...miniDialogProps}
-            />
-
+            <AttributedMiniDialog {...miniDialogProps} />
             <Notification {...notificationProps} />
 
             {isDesktop && <WindowTitlebar>{title}</WindowTitlebar>}

web/packages/base/components/MiniDialog.tsx

@@ -153,7 +153,7 @@ export interface MiniDialogAttributes {
     buttonDirection?: "row" | "column";
 }
 
-type MiniDialogProps = Pick<DialogProps, "open" | "sx"> & {
+type MiniDialogProps = Pick<DialogProps, "open"> & {
     onClose: () => void;
     attributes?: MiniDialogAttributes;
 };
@@ -168,7 +168,7 @@ type MiniDialogProps = Pick<DialogProps, "open" | "sx"> & {
  */
 export const AttributedMiniDialog: React.FC<
     React.PropsWithChildren<MiniDialogProps>
-> = ({ open, onClose, sx, attributes, children }) => {
+> = ({ open, onClose, attributes, children }) => {
     const [phase, setPhase] = useState<
         "loading" | "secondary-loading" | "failed" | undefined
     >();
@@ -268,7 +268,7 @@ export const AttributedMiniDialog: React.FC<
 
     return (
         <Dialog
-            {...{ open, sx }}
+            {...{ open }}
             onClose={handleClose}
             fullWidth
             slotProps={{ paper: { sx: { maxWidth: "360px" } } }}

web/packages/gallery/components/FileInfo.tsx

@@ -51,10 +51,6 @@ import {
     confirmEnableMapsDialogAttributes,
 } from "@/new/photos/components/utils/dialog";
 import { useSettingsSnapshot } from "@/new/photos/components/utils/use-snapshot";
-import {
-    aboveFileViewerContentZ,
-    fileInfoDrawerZ,
-} from "@/new/photos/components/utils/z-index";
 import {
     getAnnotatedFacesForFile,
     isMLEnabled,
@@ -433,7 +429,6 @@ const FileInfoSidebar = styled(
         />
     ),
 )(({ theme }) => ({
-    zIndex: fileInfoDrawerZ,
     // [Note: Lighter backdrop for overlays on photo viewer]
     //
     // The default backdrop color we use for the drawer in light mode is too
@@ -817,12 +812,7 @@ const RenameFileDialog: React.FC<RenameFileDialogProps> = ({
     };
 
     return (
-        <Dialog
-            {...{ open, onClose }}
-            sx={{ zIndex: aboveFileViewerContentZ }}
-            fullWidth
-            maxWidth="xs"
-        >
+        <Dialog {...{ open, onClose }} fullWidth maxWidth="xs">
             <DialogTitle sx={{ "&&&": { paddingBlock: "26px 0px" } }}>
                 {t("rename_file")}
             </DialogTitle>

web/packages/gallery/components/FileInfoComponents.tsx

@@ -1,4 +1,3 @@
-import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import DoneIcon from "@mui/icons-material/Done";
 import { IconButton, Tooltip, type SvgIconProps } from "@mui/material";
@@ -28,12 +27,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ text, size }) => {
     const Icon = copied ? DoneIcon : ContentCopyIcon;
 
     return (
-        <Tooltip
-            arrow
-            open={copied}
-            title={t("copied")}
-            slotProps={{ popper: { sx: { zIndex: aboveFileViewerContentZ } } }}
-        >
+        <Tooltip arrow open={copied} title={t("copied")}>
             <IconButton onClick={handleClick} color="secondary">
                 <Icon fontSize={size} />
             </IconButton>

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

@@ -6,7 +6,6 @@ import {
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import dayjs, { Dayjs } from "dayjs";
 import React, { useState } from "react";
-import { aboveFileViewerContentZ } from "./utils/z-index";
 
 interface FileDateTimePickerProps {
     /**
@@ -93,11 +92,6 @@ export const FileDateTimePicker: React.FC<FileDateTimePickerProps> = ({
                     layout: {
                         sx: { ".MuiTimeClock-root": { minHeight: "336px" } },
                     },
-
-                    /* We also get opened from the info drawer in the photo
-                       viewer, so give our dialog a higher z-index than both the
-                       photo viewer and the info drawer */
-                    dialog: { sx: { zIndex: aboveFileViewerContentZ } },
                 }}
             />
         </LocalizationProvider>

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

@@ -7,7 +7,6 @@ import log from "@/base/log";
 import { Stack, Typography, type ModalProps } from "@mui/material";
 import { t } from "i18next";
 import { useState } from "react";
-import { aboveFileViewerContentZ } from "./utils/z-index";
 
 type ConfirmDeleteFileDialogProps = ModalVisibilityProps & {
     /**
@@ -59,7 +58,6 @@ export const ConfirmDeleteFileDialog: React.FC<
             onClose={handleClose}
             title={t("trash_file_title")}
             sx={(theme) => ({
-                zIndex: aboveFileViewerContentZ,
                 // See: [Note: Lighter backdrop for overlays on photo viewer]
                 ...theme.applyStyles("light", {
                     ".MuiBackdrop-root": {

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

@@ -22,7 +22,6 @@ import { downloadAndRevokeObjectURL } from "@/base/utils/web";
 import { downloadManager } from "@/gallery/services/download";
 import type { Collection } from "@/media/collection";
 import type { EnteFile } from "@/media/file";
-import { aboveFileViewerContentZ } from "@/new/photos/components/utils/z-index";
 import { getLocalCollections } from "@/new/photos/services/collections";
 import { CenteredFlex } from "@ente/shared/components/Container";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
@@ -525,8 +524,8 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = ({
         <Backdrop
             sx={{
                 backgroundColor: "background.default" /* Opaque */,
-                zIndex: aboveFileViewerContentZ,
                 width: "100%",
+                zIndex: "var(--mui-zIndex-modal)",
             }}
             open
         >

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

@@ -20,20 +20,9 @@
  * tries to hold those customizations.
  */
 
-/**
- * PhotoSwipe sets the zIndex of its "pswp" class to 1500. We need to go higher
- * than that for our drawers and dialogs to get them to show above it.
- */
-export const photoSwipeZ = 1500;
-
-/**
- * The file info drawer needs to be higher than the photo viewer.
- */
-export const fileInfoDrawerZ = photoSwipeZ + 1;
-
 /**
  * Dialogs (not necessarily always) need to be higher still so to ensure they
  * are visible above the file info drawer in case they are shown in response to
  * some action taken in the file info drawer.
  */
-export const aboveFileViewerContentZ = fileInfoDrawerZ + 1;
+export const aboveFileViewerContentZ = 1502;