fix: layer mobile widget details above header

Author: ajnart

apps/nextjs/src/components/layout/header.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
 import { Spotlight } from "@homarr/spotlight";
-import { Link } from "@homarr/ui";
+import { appShellHeaderZIndex, Link } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";
@@ -31,7 +31,7 @@ export const MainHeader = ({
   return (
     <AppShellHeader
       maw="100vw"
-      zIndex={201}
+      zIndex={appShellHeaderZIndex}
       style={{
         overflowX: "hidden",
         paddingTop: withSafeArea ? "env(safe-area-inset-top)" : undefined,

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",
       }}

packages/ui/src/index.ts

@@ -3,6 +3,7 @@ import type { MantineProviderProps } from "@mantine/core";
 import { theme } from "./theme";
 
 export { theme } from "./theme";
+export { appShellHeaderZIndex, managedModalZIndex, modalZIndex } from "./theme/layers";
 export { modalSizeForm, modalSizeSelect } from "./theme/modal";
 export * from "./components";
 

packages/ui/src/theme.ts

@@ -1,5 +1,6 @@
 import { createTheme, rem } from "@mantine/core";
 
+import { modalZIndex } from "./theme/layers";
 import { modalComponent } from "./theme/modal";
 
 export const theme = createTheme({
@@ -101,6 +102,11 @@ export const theme = createTheme({
         overlayProps: { radius: "sm", blur: 2 },
       },
     },
+    Drawer: {
+      defaultProps: {
+        zIndex: modalZIndex,
+      },
+    },
     Modal: modalComponent,
   },
 });

packages/ui/src/theme/layers.ts

@@ -0,0 +1,5 @@
+import { getDefaultZIndex } from "@mantine/core";
+
+export const appShellHeaderZIndex = getDefaultZIndex("modal") + 1;
+export const modalZIndex = appShellHeaderZIndex + 1;
+export const managedModalZIndex = modalZIndex + 1;

packages/ui/src/theme/modal.spec.ts

@@ -0,0 +1,16 @@
+import { getDefaultZIndex } from "@mantine/core";
+import { describe, expect, test } from "vitest";
+
+import { theme } from "../theme";
+import { appShellHeaderZIndex, managedModalZIndex, modalZIndex } from "./layers";
+import { modalComponent } from "./modal";
+
+describe("application layers", () => {
+  test("keeps dialogs above the fixed header and managed dialogs above regular dialogs", () => {
+    expect(appShellHeaderZIndex).toBe(getDefaultZIndex("modal") + 1);
+    expect(modalZIndex).toBe(appShellHeaderZIndex + 1);
+    expect(managedModalZIndex).toBe(modalZIndex + 1);
+    expect(modalComponent.defaultProps).toMatchObject({ zIndex: modalZIndex });
+    expect(theme.components?.Drawer?.defaultProps).toMatchObject({ zIndex: modalZIndex });
+  });
+});

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" } };