Fix modal popup

src/components/onboarding/provisioning-status.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTranslations, useFormatter } from "next-intl";
 import { Card } from "@/components/ui/card";
+import { Modal } from "@/components/ui/modal";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { formatDateTime, formatRelative } from "@/lib/format";
 
@@ -250,43 +251,38 @@ export function ProvisioningStatus({ requestId, canAct }: Props) {
         </div>
 
         {confirmCancel && (
-          <div
-            role="dialog"
-            aria-modal="true"
-            className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
-            onClick={(e) => {
-              if (e.target === e.currentTarget) setConfirmCancel(false);
-            }}
+          <Modal
+            open={confirmCancel}
+            onClose={() => setConfirmCancel(false)}
+            ariaLabel={t("cancelConfirmRequestTitle")}
           >
-            <div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full">
-              <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
-                {t("cancelConfirmRequestTitle")}
-              </h3>
-              <p className="text-sm text-text-secondary mb-5">
-                {t("cancelConfirmRequestDescription")}
-              </p>
-              <div className="flex justify-end gap-2">
-                <button
-                  type="button"
-                  onClick={() => setConfirmCancel(false)}
-                  disabled={actionPending}
-                  className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
-                >
-                  {tCommon("cancel")}
-                </button>
-                <button
-                  type="button"
-                  onClick={handleCancel}
-                  disabled={actionPending}
-                  className="text-sm px-4 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors disabled:opacity-50"
-                >
-                  {actionPending
-                    ? tCommon("loading")
-                    : t("cancelRequestConfirm")}
-                </button>
-              </div>
+            <h3 className="font-display text-lg font-semibold text-text-primary mb-2">
+              {t("cancelConfirmRequestTitle")}
+            </h3>
+            <p className="text-sm text-text-secondary mb-5">
+              {t("cancelConfirmRequestDescription")}
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setConfirmCancel(false)}
+                disabled={actionPending}
+                className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary transition-colors"
+              >
+                {tCommon("cancel")}
+              </button>
+              <button
+                type="button"
+                onClick={handleCancel}
+                disabled={actionPending}
+                className="text-sm px-4 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors disabled:opacity-50"
+              >
+                {actionPending
+                  ? tCommon("loading")
+                  : t("cancelRequestConfirm")}
+              </button>
             </div>
-          </div>
+          </Modal>
         )}
       </Card>
     );