From 916772a80251f2bcaf1e87e92d598d5c7ee09347 Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Mon, 22 Dec 2025 13:30:19 +0530
Subject: [PATCH] fix: workspace member modal z-index

---
 .../confirm-workspace-member-remove.tsx       | 116 +++++++-----------
 1 file changed, 41 insertions(+), 75 deletions(-)

diff --git a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 9b73b3eb956..1eb29a0ef7d 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -1,10 +1,9 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react";
+import { useState } from "react"; import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
 // ui
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // hooks
 import { useUser } from "@/hooks/store/user";
 
@@ -40,79 +39,46 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
-                    </div>
-                    <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-h5-medium leading-6 text-primary">
-                        {currentUser?.id === userDetails.id
-                          ? "Leave workspace?"
-                          : `Remove ${userDetails?.display_name}?`}
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        {currentUser?.id === userDetails.id ? (
-                          <p className="text-body-xs-regular text-secondary">
-                            {t("workspace_settings.settings.members.leave_confirmation")}
-                          </p>
-                        ) : (
-                          <p className="text-body-xs-regular text-secondary">
-                            {/* TODO: Add translation here */}
-                            Are you sure you want to remove member-{" "}
-                            <span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
-                            access to this workspace. This action cannot be undone.
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <Button variant="secondary" size="lg" onClick={handleClose}>
-                    {t("cancel")}
-                  </Button>
-                  <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
-                    {currentUser?.id === userDetails.id
-                      ? isRemoving
-                        ? t("leaving")
-                        : t("leave")
-                      : isRemoving
-                        ? t("removing")
-                        : t("remove")}
-                  </Button>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+            <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </div>
+          <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+            <h3 className="text-h5-medium leading-6 text-primary">
+              {currentUser?.id === userDetails.id ? "Leave workspace?" : `Remove ${userDetails?.display_name}?`}
+            </h3>
+            <div className="mt-2">
+              {currentUser?.id === userDetails.id ? (
+                <p className="text-body-xs-regular text-secondary">
+                  {t("workspace_settings.settings.members.leave_confirmation")}
+                </p>
+              ) : (
+                <p className="text-body-xs-regular text-secondary">
+                  {/* TODO: Add translation here */}
+                  Are you sure you want to remove member- <span className="font-bold">{userDetails?.display_name}</span>
+                  ? They will no longer have access to this workspace. This action cannot be undone.
+                </p>
+              )}
+            </div>
           </div>
         </div>
-      </Dialog>
-    </Transition.Root>
+      </div>
+      <div className="flex justify-end gap-2 p-4 sm:px-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
+          {currentUser?.id === userDetails.id
+            ? isRemoving
+              ? t("leaving")
+              : t("leave")
+            : isRemoving
+              ? t("removing")
+              : t("remove")}
+        </Button>
+      </div>
+    </ModalCore>
   );
 });