refactor: use React Portals for note modals to ensure foreground visibility

This commit is contained in:
Christian Vidal Wolf
2026-04-27 14:40:39 +02:00
parent 0fa845e814
commit 5e9ab45191
+6 -4
View File
@@ -809,7 +809,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
</button>
)}
{/* ── Anna Note Editor Modal ── */}
{annaEditor && (
{annaEditor && createPortal(
<div className="fixed inset-0 bg-slate-950/50 backdrop-blur-sm z-[10000] flex items-center justify-center p-4">
<div className="bg-slate-800 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md animate-in zoom-in-95 duration-200">
<div className="p-4 border-b border-slate-700 flex items-center justify-between">
@@ -838,11 +838,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
</button>
</div>
</div>
</div>
</div>,
document.body
)}
{/* ── Note Editor Modal ── */}
{noteEditor && (
{noteEditor && createPortal(
<div className="fixed inset-0 bg-slate-950/50 backdrop-blur-sm z-[10000] flex items-center justify-center p-4">
<div className="bg-slate-800 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md animate-in zoom-in-95 duration-200">
<div className="p-4 border-b border-slate-700 flex items-center justify-between">
@@ -871,7 +872,8 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
</button>
</div>
</div>
</div>
</div>,
document.body
)}
<div className="flex items-center justify-between gap-4">