fix(portal): raise ConfirmDialog z-index to 1000 to clear FieldPlacer overlays and nav stacking context

This commit is contained in:
Chandler Copeland
2026-04-06 13:55:14 -06:00
parent e6e4dc92a6
commit db7a76defc

View File

@@ -9,33 +9,26 @@ type Props = {
confirmLabel?: string; confirmLabel?: string;
}; };
export function ConfirmDialog({ export function ConfirmDialog({ isOpen, title, message, onConfirm, onCancel, confirmLabel = "Delete" }: Props) {
isOpen,
title,
message,
onConfirm,
onCancel,
confirmLabel = "Delete",
}: Props) {
if (!isOpen) return null; if (!isOpen) return null;
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"> <div style={{ position: "fixed", inset: 0, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.4)" }}>
<div className="bg-white rounded-xl shadow-xl p-6 w-full max-w-md"> <div style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 8px 32px rgba(0,0,0,0.18)", padding: "2rem", width: "100%", maxWidth: "28rem" }}>
<h2 className="text-[var(--navy)] text-lg font-semibold mb-2">{title}</h2> <h2 style={{ color: "#1B2B4B", fontSize: "1.125rem", fontWeight: 700, marginBottom: "0.5rem" }}>{title}</h2>
<p className="text-gray-600 text-sm mb-6">{message}</p> <p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: "1.5rem" }}>{message}</p>
<div className="flex justify-end gap-3"> <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.75rem" }}>
<button <button
type="button" type="button"
onClick={onCancel} onClick={onCancel}
className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50" className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
> >
Cancel Cancel
</button> </button>
<button <button
type="button" type="button"
onClick={onConfirm} onClick={onConfirm}
className="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700" className="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 transition"
> >
{confirmLabel} {confirmLabel}
</button> </button>