From 37119b9c8a8d9496a1c95a9544b8ae947b000de0 Mon Sep 17 00:00:00 2001
From: root <root@dashboard-dev.charterlab.com>
Date: Wed, 29 Apr 2026 14:05:51 +0000
Subject: [PATCH] Fix profile panel z-index overlap by rendering via portal

UserProfilePanel was rendered inside the header's stacking context
(z-index: 50), which capped its effective z-index and allowed dashboard
content to paint on top of it. Wrap the overlay in createPortal to
document.body so its z-index: 100 resolves at the root level.
---
 frontend/src/components/UserProfilePanel.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/UserProfilePanel.js b/frontend/src/components/UserProfilePanel.js
index 1c1dc26..7cf4e91 100644
--- a/frontend/src/components/UserProfilePanel.js
+++ b/frontend/src/components/UserProfilePanel.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { X, User, Mail, Shield, Calendar, Clock, Loader, AlertCircle, RefreshCw, Lock, Eye, EyeOff, CheckCircle } from 'lucide-react';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -10,19 +11,19 @@ const STYLES = {
   overlay: {
     position: 'fixed',
     inset: 0,
-    background: 'rgba(10, 14, 39, 0.97)',
+    background: 'var(--bg-overlay)',
     backdropFilter: 'blur(12px)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 50,
+    zIndex: 100,
     padding: '1rem',
   },
   panel: {
     background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%)',
     border: '1.5px solid rgba(14, 165, 233, 0.3)',
-    borderRadius: '0.5rem',
-    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(14, 165, 233, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
+    borderRadius: 12,
+    boxShadow: 'var(--shadow-modal)',
     width: '100%',
     maxWidth: '480px',
     maxHeight: '90vh',
@@ -482,7 +483,7 @@ export default function UserProfilePanel({ isOpen, onClose }) {
 
   if (!isOpen) return null;
 
-  return (
+  return createPortal(
     <div style={STYLES.overlay}>
       <div ref={panelRef} style={STYLES.panel}>
         {/* Header */}
@@ -749,6 +750,7 @@ export default function UserProfilePanel({ isOpen, onClose }) {
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }