From b103e79e92c95276aefad96be95395e95a04a9d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Tue, 7 Apr 2026 16:09:22 +0200
Subject: [PATCH] feat(ux): prevent wizard close on backdrop click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AnimatedModal: add disableBackdropClose prop (default false, no impact
on existing consumers). When true, overlay onClick is removed.

ProjectWizard: remove handleBackdropClick — backdrop click no longer
closes the wizard. Only the X button and Cancel close it.

EstimateWizard already had no backdrop-click handler; no change needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/projects/ProjectWizard.tsx | 5 -----
 apps/web/src/components/ui/AnimatedModal.tsx       | 4 +++-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/projects/ProjectWizard.tsx b/apps/web/src/components/projects/ProjectWizard.tsx
index 5b786d1..fe3a736 100644
--- a/apps/web/src/components/projects/ProjectWizard.tsx
+++ b/apps/web/src/components/projects/ProjectWizard.tsx
@@ -1478,14 +1478,9 @@ export function ProjectWizard({ open, onClose, onSuccess }: ProjectWizardProps)
 
   if (!open) return null;
 
-  function handleBackdropClick(e: React.MouseEvent<HTMLDivElement>) {
-    if (e.target === e.currentTarget) handleClose();
-  }
-
   return (
     <div
       className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8 px-4"
-      onClick={handleBackdropClick}
     >
       <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative">
         {/* Celebration effects */}
diff --git a/apps/web/src/components/ui/AnimatedModal.tsx b/apps/web/src/components/ui/AnimatedModal.tsx
index 7eb4115..f814f99 100644
--- a/apps/web/src/components/ui/AnimatedModal.tsx
+++ b/apps/web/src/components/ui/AnimatedModal.tsx
@@ -10,6 +10,7 @@ interface AnimatedModalProps {
   className?: string;
   overlayClassName?: string;
   maxWidth?: string;
+  disableBackdropClose?: boolean;
 }
 
 export function AnimatedModal({
@@ -19,6 +20,7 @@ export function AnimatedModal({
   className,
   overlayClassName,
   maxWidth = "max-w-xl",
+  disableBackdropClose = false,
 }: AnimatedModalProps) {
   const panelRef = useRef<HTMLDivElement>(null);
 
@@ -49,7 +51,7 @@ export function AnimatedModal({
               overlayClassName ??
               "absolute inset-0 bg-black/40 backdrop-blur-sm"
             }
-            onClick={onClose}
+            onClick={disableBackdropClose ? undefined : onClose}
             aria-hidden="true"
           />