From 0356eb427ce32b6800f294880e68f197e9eb03ab Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Wed, 29 Jul 2026 20:06:59 +0200
Subject: [PATCH] Revert "fix: layer mobile widget details above header"

This reverts commit a540f07920b9a0090455b507851d1b1f667d957f.
---
 packages/modals/src/index.tsx       |  5 ++---
 packages/ui/src/index.ts            |  1 -
 packages/ui/src/theme.ts            |  6 ------
 packages/ui/src/theme/layers.ts     |  5 -----
 packages/ui/src/theme/modal.spec.ts | 16 ----------------
 packages/ui/src/theme/modal.ts      |  5 -----
 6 files changed, 2 insertions(+), 36 deletions(-)
 delete mode 100644 packages/ui/src/theme/layers.ts
 delete mode 100644 packages/ui/src/theme/modal.spec.ts

diff --git a/packages/modals/src/index.tsx b/packages/modals/src/index.tsx
index ef365647c..0071185a8 100644
--- a/packages/modals/src/index.tsx
+++ b/packages/modals/src/index.tsx
@@ -2,13 +2,12 @@
 
 import type { PropsWithChildren } from "react";
 import { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
-import { Modal } from "@mantine/core";
+import { getDefaultZIndex, 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";
@@ -100,7 +99,7 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
   return (
     <Modal
       key={modal.id}
-      zIndex={managedModalZIndex}
+      zIndex={getDefaultZIndex("modal") + 1}
       style={{
         userSelect: modal.id === state.current?.id ? undefined : "none",
       }}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e5f662336..1e8db7d58 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -3,7 +3,6 @@ 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";
 
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 105039dde..2afa0f689 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -1,6 +1,5 @@
 import { createTheme, rem } from "@mantine/core";
 
-import { modalZIndex } from "./theme/layers";
 import { modalComponent } from "./theme/modal";
 
 export const theme = createTheme({
@@ -102,11 +101,6 @@ export const theme = createTheme({
         overlayProps: { radius: "sm", blur: 2 },
       },
     },
-    Drawer: {
-      defaultProps: {
-        zIndex: modalZIndex,
-      },
-    },
     Modal: modalComponent,
   },
 });
diff --git a/packages/ui/src/theme/layers.ts b/packages/ui/src/theme/layers.ts
deleted file mode 100644
index 94bf0398a..000000000
--- a/packages/ui/src/theme/layers.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { getDefaultZIndex } from "@mantine/core";
-
-export const appShellHeaderZIndex = getDefaultZIndex("modal") + 1;
-export const modalZIndex = appShellHeaderZIndex + 1;
-export const managedModalZIndex = modalZIndex + 1;
diff --git a/packages/ui/src/theme/modal.spec.ts b/packages/ui/src/theme/modal.spec.ts
deleted file mode 100644
index 705ef0f47..000000000
--- a/packages/ui/src/theme/modal.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-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 });
-  });
-});
diff --git a/packages/ui/src/theme/modal.ts b/packages/ui/src/theme/modal.ts
index 2ee5918a0..7bb9f4e69 100644
--- a/packages/ui/src/theme/modal.ts
+++ b/packages/ui/src/theme/modal.ts
@@ -1,7 +1,5 @@
 import type { MantineTheme, MantineThemeComponent, ModalProps } from "@mantine/core";
 
-import { modalZIndex } from "./layers";
-
 export const modalSizeSelect = "xxl";
 export const modalSizeForm = "lg";
 
@@ -10,9 +8,6 @@ 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" } };