From db7a76defc73cf65f55b3f7d448943559ea3a2f5 Mon Sep 17 00:00:00 2001
From: Chandler Copeland <ccopeland@motivhealth.com>
Date: Mon, 6 Apr 2026 13:55:14 -0600
Subject: [PATCH] fix(portal): raise ConfirmDialog z-index to 1000 to clear
 FieldPlacer overlays and nav stacking context

---
 .../app/portal/_components/ConfirmDialog.tsx  | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/teressa-copeland-homes/src/app/portal/_components/ConfirmDialog.tsx b/teressa-copeland-homes/src/app/portal/_components/ConfirmDialog.tsx
index 56b18e2..e914e9d 100644
--- a/teressa-copeland-homes/src/app/portal/_components/ConfirmDialog.tsx
+++ b/teressa-copeland-homes/src/app/portal/_components/ConfirmDialog.tsx
@@ -9,33 +9,26 @@ type Props = {
   confirmLabel?: string;
 };
 
-export function ConfirmDialog({
-  isOpen,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-  confirmLabel = "Delete",
-}: Props) {
+export function ConfirmDialog({ isOpen, title, message, onConfirm, onCancel, confirmLabel = "Delete" }: Props) {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-      <div className="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
-        <h2 className="text-[var(--navy)] text-lg font-semibold mb-2">{title}</h2>
-        <p className="text-gray-600 text-sm mb-6">{message}</p>
-        <div className="flex justify-end gap-3">
+    <div style={{ position: "fixed", inset: 0, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: "rgba(0,0,0,0.4)" }}>
+      <div style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 8px 32px rgba(0,0,0,0.18)", padding: "2rem", width: "100%", maxWidth: "28rem" }}>
+        <h2 style={{ color: "#1B2B4B", fontSize: "1.125rem", fontWeight: 700, marginBottom: "0.5rem" }}>{title}</h2>
+        <p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: "1.5rem" }}>{message}</p>
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.75rem" }}>
           <button
             type="button"
             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
           </button>
           <button
             type="button"
             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}
           </button>