src/components/auth/SessionExpiryDialog.test.tsx

@@ -0,0 +1,39 @@
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { act, render, screen } from "@testing-library/react";
+
+import { useAuthStore } from "@/store/authStore";
+import { SessionExpiryDialog } from "./SessionExpiryDialog";
+
+jest.mock("next-auth/react", () => ({
+  signIn: jest.fn(),
+}));
+
+describe("SessionExpiryDialog", () => {
+  beforeEach(() => {
+    useAuthStore.setState({
+      accessToken: null,
+      sessionExpired: true,
+      sessionExpiryReason: "unauthorized",
+    });
+  });
+
+  afterEach(() => {
+    act(() => useAuthStore.getState().clearSessionExpired());
+  });
+
+  it("renders above every regular application overlay", () => {
+    const theme = createTheme();
+
+    render(
+      <ThemeProvider theme={theme}>
+        <SessionExpiryDialog />
+      </ThemeProvider>,
+    );
+
+    const dialogRoot = screen.getByRole("dialog").closest(".MuiModal-root");
+    expect(dialogRoot).not.toBeNull();
+    expect(dialogRoot).toHaveStyle({
+      zIndex: theme.zIndex.tooltip + 1,
+    });
+  });
+});

src/components/auth/SessionExpiryDialog.tsx

@@ -13,6 +13,7 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 import { useAuthStore } from "@/store/authStore";
 
@@ -25,6 +26,7 @@ type SessionExpiryDialogProps = {
 export const SessionExpiryDialog = ({
   expiresAt,
 }: SessionExpiryDialogProps) => {
+  const theme = useTheme();
   const sessionExpired = useAuthStore((state) => state.sessionExpired);
   const reason = useAuthStore((state) => state.sessionExpiryReason);
   const [now, setNow] = useState(() => Date.now());
@@ -61,6 +63,7 @@ export const SessionExpiryDialog = ({
   return (
     <Dialog
       open={isOpen}
+      style={{ zIndex: theme.zIndex.tooltip + 1 }}
       disableEscapeKeyDown={sessionExpired}
       onClose={sessionExpired ? undefined : () => setWarningDismissed(true)}
       aria-labelledby="session-expiry-dialog-title"