fix: layer mobile widget details above header

packages/ui/src/theme/modal.ts

@@ -1,5 +1,7 @@
 import type { MantineTheme, MantineThemeComponent, ModalProps } from "@mantine/core";
 
+import { modalZIndex } from "./layers";
+
 export const modalSizeSelect = "xxl";
 export const modalSizeForm = "lg";
 
@@ -8,6 +10,9 @@ const fixedModalSizes = new Set([modalSizeSelect, modalSizeForm]);
 const modalWidth = "min(var(--modal-size), calc(100vw - 2 * var(--mantine-spacing-md)))";
 
 export const modalComponent: MantineThemeComponent = {
+  defaultProps: {
+    zIndex: modalZIndex,
+  },
   vars: (_theme: MantineTheme, props: Partial<ModalProps>) => {
     if (props.size === modalSizeSelect) {
       return { root: { "--modal-size": "75rem" } };