From b1346183c90c5b6365fc414a4ef9c2cee61a63fa Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sat, 21 Feb 2026 11:19:43 +0100
Subject: [PATCH] ui: fix modal z-index conflict in Experiments tab

---
 components/ExperimentDetail.tsx |  6 +++---
 components/ExperimentForm.tsx   | 14 ++++++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/ExperimentDetail.tsx b/components/ExperimentDetail.tsx
index 11c17cc..cf423d4 100644
--- a/components/ExperimentDetail.tsx
+++ b/components/ExperimentDetail.tsx
@@ -66,7 +66,7 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
   if (!experimentId) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
       <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-slate-700">
@@ -149,14 +149,14 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
                   />
                   <PerformanceCard
                     label="Lift"
-                    value={experiment.actual_lift_percent !== undefined 
+                    value={experiment.actual_lift_percent !== undefined
                       ? `${experiment.actual_lift_percent >= 0 ? '+' : ''}${experiment.actual_lift_percent}%`
                       : '—'}
                     color={experiment.actual_lift_percent && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'}
                   />
                   <PerformanceCard
                     label="Statistical Significance"
-                    value={experiment.statistical_significance 
+                    value={experiment.statistical_significance
                       ? `${(experiment.statistical_significance * 100).toFixed(1)}%`
                       : '—'}
                     color="purple"
diff --git a/components/ExperimentForm.tsx b/components/ExperimentForm.tsx
index 1f10f7e..ba564d9 100644
--- a/components/ExperimentForm.tsx
+++ b/components/ExperimentForm.tsx
@@ -44,7 +44,7 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
       .split(/[\s,]+/)  // Split by space or comma
       .map(a => a.trim().toUpperCase())
       .filter(a => a.length > 0 && /^[A-Z0-9]{9,10}$/.test(a));  // Validate ASIN format
-    
+
     const uniqueAsins = Array.from(new Set([...formData.asins, ...newAsins]));
     setFormData({ ...formData, asins: uniqueAsins });
     setAsinInput('');
@@ -95,7 +95,7 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
   const marketplaceOptions = ['DE', 'UK', 'FR', 'IT', 'ES'];
 
   return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
       <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-slate-700">
@@ -173,11 +173,10 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
                   setFormData({ ...formData, asins: [] });
                   setSelectedLine('');
                 }}
-                className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${
-                  targetType === 'asin'
+                className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'asin'
                     ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
                     : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
-                }`}
+                  }`}
               >
                 🎯 Specific ASINs
               </button>
@@ -188,11 +187,10 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
                   setFormData({ ...formData, asins: [] });
                   setAsinInput('');
                 }}
-                className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${
-                  targetType === 'line'
+                className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'line'
                     ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
                     : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
-                }`}
+                  }`}
               >
                 📦 Entire Product Line
               </button>