fix: layer mobile widget details above header

packages/modals/src/index.tsx

@@ -2,12 +2,13 @@
 
 import type { PropsWithChildren } from "react";
 import { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
-import { getDefaultZIndex, Modal } from "@mantine/core";
+import { Modal } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
 
 import type { stringOrTranslation } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
+import { managedModalZIndex } from "@homarr/ui";
 
 import type { ConfirmModalProps } from "./confirm-modal";
 import { ConfirmModal } from "./confirm-modal";
@@ -99,7 +100,7 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
   return (
     <Modal
       key={modal.id}
-      zIndex={getDefaultZIndex("modal") + 1}
+      zIndex={managedModalZIndex}
       style={{
         userSelect: modal.id === state.current?.id ? undefined : "none",
       }}