Fix: display notifications below modal windows (#5165)

packages/desktop-client/src/components/Notifications.tsx

@@ -22,6 +22,7 @@ import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
 import { Link } from './common/Link';
+import { MODAL_Z_INDEX } from './common/Modal';
 
 import {
   removeNotification,
@@ -313,7 +314,7 @@ export function Notifications({ style }: { style?: CSSProperties }) {
         top: notificationInset?.top,
         right: notificationInset?.right || 13,
         left: notificationInset?.left || (isNarrowWidth ? 13 : undefined),
-        zIndex: 10000,
+        zIndex: MODAL_Z_INDEX - 1,
         ...style,
       }}
     >

packages/desktop-client/src/components/common/Modal.tsx

@@ -33,6 +33,8 @@ import { AutoTextSize } from 'auto-text-size';
 
 import { useModalState } from '@desktop-client/hooks/useModalState';
 
+export const MODAL_Z_INDEX = 3000;
+
 type ModalProps = ComponentPropsWithRef<typeof ReactAriaModal> & {
   name: string;
   isLoading?: boolean;
@@ -80,7 +82,7 @@ export const Modal = ({
       style={{
         position: 'fixed',
         inset: 0,
-        zIndex: 3000,
+        zIndex: MODAL_Z_INDEX,
         fontSize: 14,
         willChange: 'transform',
         // on mobile, we disable the blurred background for performance reasons