From 5e9ab45191d85d105b5edf7d9d785375f65b891c Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 27 Apr 2026 14:40:39 +0200
Subject: [PATCH] refactor: use React Portals for note modals to ensure
 foreground visibility

---
 src/components/PricingView.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx
index 62389ad..28c6c15 100644
--- a/src/components/PricingView.tsx
+++ b/src/components/PricingView.tsx
@@ -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">