fix: popups no longer close on backdrop click, only via explicit close/cancel

Clicking the dimmed area outside a modal (+Task, +Invoice, expense,
review, etc.) accidentally dismissed it and lost in-progress input.
Every popup already has an explicit Cancel/Close/✕ button, so the
backdrop click handler is removed; also drops the now-dead
onClose/blockClose prop plumbing that only existed to support it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/InvoiceDetailPopup.jsx

@@ -15,8 +15,6 @@ export default function InvoiceDetailPopup({
   title,
   subtitle,
   headerRight,
-  onClose,
-  blockClose = false,
   metaContent,   // JSX fields rendered in flat meta grid (no cards)
   metaActions,   // optional JSX rendered right-aligned beside meta grid (e.g. Edit Dates)
   metaCols = 4,  // number of grid columns for meta strip
@@ -25,7 +23,7 @@ export default function InvoiceDetailPopup({
   children,
 }) {
   return (
-    <div style={popupOverlayStyle} onClick={() => { if (!blockClose) onClose?.(); }}>
+    <div style={popupOverlayStyle}>
       <div
         style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }}
         onClick={e => e.stopPropagation()}

src/pages/BrandBook.jsx

@@ -2353,7 +2353,6 @@ function DimensionEditorModal({ sourceImage, onApply, onCancel }) {
   return (
     <div
       style={{ ...popupOverlayStyle, zIndex: 9999, padding: 20 }}
-      onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
     >
       <div style={{ ...popupSurfaceStyle, borderRadius: 8, display: 'flex', flexDirection: 'column', maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden', padding: 0 }}>
         <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
@@ -3436,7 +3435,6 @@ function PhotoEditorModal({
   return (
     <div
       style={{ ...popupOverlayStyle, zIndex: 9999, padding: 20 }}
-      onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
     >
       <div style={{ ...popupSurfaceStyle, borderRadius: 8, display: 'flex', flexDirection: 'column', maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden', padding: 0 }}>
         {/* Header */}

src/pages/Profile.jsx

@@ -642,7 +642,6 @@ export default function ProfilePage() {
       {isSelfView && editOpen && (
         <div
           style={popupOverlayStyle}
-          onClick={() => { if (!savingProfile) setEditOpen(false); }}
         >
           <div
             style={{

src/pages/ProjectDetail.jsx

@@ -596,7 +596,7 @@ export default function ProjectDetailPage() {
       </div>
 
       {showClientTask && isClient && (
-        <div style={popupOverlayStyle} onClick={() => { setShowClientTask(false); setClientTaskKey(k => k + 1); setClientTaskError(''); }}>
+        <div style={popupOverlayStyle}>
           <div style={TASK_MODAL_SHELL_STYLE} onClick={e => e.stopPropagation()}>
             <div style={{ ...TASK_MODAL_TITLE_STYLE, marginBottom: 14 }}>New Task</div>
             <RequestForm
@@ -618,7 +618,7 @@ export default function ProjectDetailPage() {
       )}
 
       {addingMember && isTeam && (
-        <div style={popupOverlayStyle} onClick={() => { setAddingMember(false); setSelectedExts(new Set()); }}>
+        <div style={popupOverlayStyle}>
           <div style={{ ...TASK_MODAL_SHELL_STYLE, width: 'min(480px, 96vw)', display: 'flex', flexDirection: 'column', gap: 16, padding: 0 }} onClick={e => e.stopPropagation()}>
             <div style={{ padding: '18px 21px 0' }}>
               <div style={{ fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--text-secondary)', marginBottom: 2 }}>Manage Subcontractors</div>

src/pages/TaskDetail.jsx

@@ -1035,7 +1035,7 @@ export default function TaskDetail() {
       </div>
 
       {reviewModal && (
-        <div style={popupOverlayStyle} onClick={() => { if (!reviewSaving) { setReviewModal(false); setReviewFiles([]); setReviewNotes(''); } }}>
+        <div style={popupOverlayStyle}>
           <div style={{ ...popupSurfaceStyle, width: 'min(480px, 96vw)', maxHeight: 'calc(100vh - 48px)', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }} onClick={e => e.stopPropagation()}>
             <div style={{ fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--text-secondary)' }}>Place in Review</div>
             <div>
@@ -1054,7 +1054,7 @@ export default function TaskDetail() {
       )}
 
       {revisionModal && (
-        <div style={{ position: 'fixed', inset: 0, background: 'var(--overlay-scrim, rgba(0,0,0,0.58))', zIndex: 1200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }} onClick={() => { if (!revisionSaving) { setRevisionModal(false); setRevisionForm({ description: '', deadline: '' }); setRevisionFiles([]); } }}>
+        <div style={{ position: 'fixed', inset: 0, background: 'var(--overlay-scrim, rgba(0,0,0,0.58))', zIndex: 1200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
           <div className="card" style={{ ...CARD, width: '100%', maxWidth: 480, display: 'flex', flexDirection: 'column', gap: 18 }} onClick={e => e.stopPropagation()}>
             <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--text-primary)', letterSpacing: 0.2, lineHeight: 1.1 }}>Request Revision</div>
             <div className="form-group">
@@ -1090,7 +1090,7 @@ export default function TaskDetail() {
       )}
 
       {rejectModal && (
-        <div style={popupOverlayStyle} onClick={() => { if (!rejectSaving) { setRejectModal(false); setRejectNote(''); } }}>
+        <div style={popupOverlayStyle}>
           <div style={{ ...popupSurfaceStyle, width: 'min(480px, 96vw)', maxHeight: 'calc(100vh - 48px)', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }} onClick={e => e.stopPropagation()}>
             <div style={{ fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--text-secondary)', lineHeight: 1.1 }}>Reject Task</div>
             <div>
@@ -1114,7 +1114,7 @@ export default function TaskDetail() {
       )}
 
       {amendModal && (
-        <div style={popupOverlayStyle} onClick={() => { setAmendModal(false); setAmendForm({ description: '' }); setAmendFiles([]); }}>
+        <div style={popupOverlayStyle}>
           <div style={{ ...popupSurfaceStyle, width: 'min(480px, 96vw)', maxHeight: 'calc(100vh - 48px)', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }} onClick={e => e.stopPropagation()}>
             <div style={{ fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.8, color: 'var(--text-secondary)', lineHeight: 1.1 }}>Amend Request</div>
             <div>

src/pages/Tasks.jsx

@@ -653,7 +653,7 @@ export default function RequestsPage() {
       >
         {/* Add project modal */}
         {showAddProjectForm && (
-          <div style={popupOverlayStyle} onClick={() => { setShowAddProjectForm(false); setAddProjectForm({ name: '', companyId: '' }); setAddProjectError(''); }}>
+          <div style={popupOverlayStyle}>
             <div style={PROJECT_MODAL_SHELL_STYLE} onClick={e => e.stopPropagation()}>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 14 }}>
                 <div style={TASK_MODAL_TITLE_STYLE}>Add Project</div>
@@ -682,7 +682,7 @@ export default function RequestsPage() {
 
         {/* Add task modal */}
         {showAddForm && (
-          <div style={popupOverlayStyle} onClick={() => { setShowAddForm(false); setAddFormKey(k => k + 1); setAddError(''); }}>
+          <div style={popupOverlayStyle}>
             <div style={TASK_MODAL_SHELL_STYLE} onClick={e => e.stopPropagation()}>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 14 }}>
                 <div style={TASK_MODAL_TITLE_STYLE}>{isTeam ? 'Add Task' : 'New Task'}</div>

src/pages/client/ClientMyInvoices.jsx

@@ -103,8 +103,6 @@ function ClientInvoiceModal({ invoice, onClose }) {
       title={invoice.invoice_number}
       subtitle={invoice.bill_to || company?.name}
       headerRight={<StatusBadge status={statusColor[invoice.status] || 'not_started'} label={`${invoiceStatusLabel(invoice.status)}${isOverdue ? ' · Overdue' : ''}`} />}
-      onClose={onClose}
-      blockClose={Boolean(downloading)}
       metaContent={<>
         <div><div style={F}>Invoice Date</div><div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{invoice.invoice_date ? new Date(invoice.invoice_date).toLocaleDateString() : '—'}</div></div>
         <div><div style={F}>Due Date</div><div style={{ fontSize: 13, color: isOverdue ? 'var(--danger)' : 'var(--text-primary)' }}>{invoice.due_date ? new Date(invoice.due_date).toLocaleDateString() : '—'}</div></div>

src/pages/external/ExternalMyInvoices.jsx

@@ -428,7 +428,7 @@ export default function MyInvoices() {
       </div>
 
       {showInvoiceForm && (
-        <div style={popupOverlayStyle} onClick={() => setShowInvoiceForm(false)}>
+        <div style={popupOverlayStyle}>
           <div
             style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }}
             onClick={(e) => e.stopPropagation()}
@@ -469,8 +469,6 @@ export default function MyInvoices() {
             title={inv?.invoice_number || 'Subcontractor Invoice'}
             subtitle={`${currentUser?.name || 'Subcontractor'}${currentUser?.email ? ` · ${currentUser.email}` : ''}`}
             headerRight={inv ? <StatusBadge status={STATUS_BADGE[inv.status] || 'not_started'} label={invoiceStatus} /> : null}
-            onClose={() => { if (!busy) { setViewingInvoice(null); setDetailError(''); } }}
-            blockClose={busy}
             loading={detailLoading && !inv}
             metaContent={inv ? <>
               <div><div style={F}>Created</div><div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{inv.created_at ? new Date(inv.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</div></div>

src/pages/team/TeamInvoiceDetail.jsx

@@ -403,8 +403,6 @@ export function TeamInvoiceDetailPanel({
             label={`${invoice.status ? invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1) : '—'}${isOverdue ? ' · Overdue' : ''}`}
           />
         ) : null}
-        onClose={onClose}
-        blockClose={saving || Boolean(generating)}
         loading={loading}
         metaContent={invoice ? <>
           <div>

src/pages/team/TeamInvoices.jsx

@@ -1761,8 +1761,6 @@ export default function Invoices() {
             title={invoice.invoice_number || 'Subcontractor Invoice'}
             subtitle={`${invoice.profile?.name || 'External'}${invoice.profile?.email ? ` · ${invoice.profile.email}` : ''}`}
             headerRight={<StatusBadge status={subInvoiceStatusColor[invoice.status] || 'not_started'} label={invoiceStatus} />}
-            onClose={() => { if (!markingPaid) setViewingSubInvoice(null); }}
-            blockClose={Boolean(markingPaid)}
             metaContent={<>
               <div><div style={F}>Submitted</div><div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{invoice.submitted_at ? new Date(invoice.submitted_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</div></div>
               <div><div style={F}>Paid</div><div style={{ fontSize: 13, color: 'var(--text-primary)' }}>{invoice.paid_at ? new Date(invoice.paid_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</div></div>
@@ -1819,7 +1817,7 @@ export default function Invoices() {
           newExpense.removeReceipt === true
         );
         return (
-          <div style={popupOverlayStyle} onClick={() => { setViewingExpense(null); setExpenseDetailEditing(false); }}>
+          <div style={popupOverlayStyle}>
             <div style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }} onClick={e => e.stopPropagation()}>
               {/* Main content row */}
               <div style={{ display: 'flex', gap: 24, alignItems: 'stretch', flex: 1, minHeight: 0 }}>
@@ -1914,7 +1912,7 @@ export default function Invoices() {
         const LABEL = { ...FIELD_LABEL_STYLE, marginBottom: 3 };
         const INPUT = FINANCE_MODAL_INPUT_STYLE;
         return (
-          <div style={popupOverlayStyle} onClick={cancelExpenseEdit}>
+          <div style={popupOverlayStyle}>
             <div style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }} onClick={e => e.stopPropagation()}>
               <form onSubmit={handleAddExpense} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, gap: 0 }}>
                 {/* Main content row */}
@@ -1970,7 +1968,7 @@ export default function Invoices() {
         const LABEL = { ...FIELD_LABEL_STYLE, marginBottom: 3 };
         const INPUT = FINANCE_MODAL_INPUT_STYLE;
         return (
-          <div style={popupOverlayStyle} onClick={() => { if (!invSaving) invClose(); }}>
+          <div style={popupOverlayStyle}>
             <div style={{ ...popupSurfaceStyle, width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }} onClick={e => e.stopPropagation()}>
               <div style={{ display: 'flex', gap: 24, alignItems: 'stretch', flex: 1, minHeight: 0 }}>