fix(web): cover composer with move dialog

apps/web/src/components/MoveToTeamConfirmDialog.tsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Dialog, DialogDescription, DialogFooter, DialogTitle } from '@open-design/components';
 import { useT } from '../i18n';
 
@@ -31,10 +32,9 @@ export function MoveToTeamConfirmDialog({
   const t = useT();
   const titleId = useId();
   const [dontRemind, setDontRemind] = useState(false);
-  return (
+  const dialog = (
     <Dialog
       className="modal-confirm"
-      backdropClassName="modal-backdrop--no-blur"
       role="alertdialog"
       onClose={onCancel}
       closeOnEscape
@@ -93,4 +93,6 @@ export function MoveToTeamConfirmDialog({
       </DialogFooter>
     </Dialog>
   );
+
+  return typeof document !== 'undefined' ? createPortal(dialog, document.body) : dialog;
 }

apps/web/tests/components/MoveToTeamConfirmDialog.test.tsx

@@ -0,0 +1,28 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MoveToTeamConfirmDialog } from '../../src/components/MoveToTeamConfirmDialog';
+
+describe('MoveToTeamConfirmDialog', () => {
+  it('escapes the workspace stacking context so its backdrop also covers the global composer', () => {
+    render(
+      <div data-testid="workspace-stacking-context">
+        <MoveToTeamConfirmDialog
+          action="to-team"
+          onCancel={vi.fn()}
+          onConfirm={vi.fn()}
+        />
+      </div>,
+    );
+
+    const workspaceLayer = screen.getByTestId('workspace-stacking-context');
+    const dialog = screen.getByRole('alertdialog', { name: 'Move to team space' });
+    const backdrop = dialog.parentElement;
+
+    expect(workspaceLayer).not.toContainElement(dialog);
+    expect(backdrop?.parentElement).toBe(document.body);
+    expect(backdrop).not.toHaveClass('modal-backdrop--no-blur');
+  });
+});