From 3fcb5696a1595dee441a4c59fbd5951c3fd39c6b Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Thu, 9 Apr 2026 10:19:21 -0400
Subject: [PATCH] fix(ui): move mobile overlays outside backdrop-filter
 elements to fix stacking context

---
 web/experience/src/components/AppHeader.tsx | 11 +++++++----
 web/studio/src/components/Navbar.tsx        | 12 ++++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/experience/src/components/AppHeader.tsx b/web/experience/src/components/AppHeader.tsx
index e00dc79..64e11a8 100644
--- a/web/experience/src/components/AppHeader.tsx
+++ b/web/experience/src/components/AppHeader.tsx
@@ -23,6 +23,7 @@ export default function AppHeader() {
     const platformName = branding?.platform_name || branding?.name || 'Academia';
 
     return (
+        <>
         <header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/80 dark:bg-black/40 border-b border-black/8 dark:border-white/5">
             <Link href="/" className="flex items-center gap-2 md:gap-5 group" aria-label={`${platformName} - Dashboard`}>
                 <div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-36 h-9 md:w-56 md:h-12 px-2 bg-white' : 'w-8 h-8 md:w-12 md:h-12'}`}>
@@ -116,9 +117,11 @@ export default function AppHeader() {
                     </button>
                 </div>
             </div>
+            </header>
 
-            {/* Mobile Sidebar Overlay */}
-            {isMenuOpen && (
+                {/* Mobile Sidebar Overlay — fuera del <header> para que el
+                    backdrop-filter no cree un stacking context que confine el fixed */}
+                {isMenuOpen && (
                 <div
                     className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-300"
                     onClick={() => setIsMenuOpen(false)}
@@ -221,6 +224,6 @@ export default function AppHeader() {
                     </div>
                 </div>
             )}
-        </header>
-    );
+            </>
+        );
 }
diff --git a/web/studio/src/components/Navbar.tsx b/web/studio/src/components/Navbar.tsx
index c87f343..f8ba3b1 100644
--- a/web/studio/src/components/Navbar.tsx
+++ b/web/studio/src/components/Navbar.tsx
@@ -36,6 +36,7 @@ export function Navbar() {
     const platformName = branding?.platform_name || branding?.name || 'Studio';
 
     return (
+        <>
         <nav className="fixed top-0 w-full z-50 glass border-b border-black/5 dark:border-white/10 bg-gray-50/70 dark:bg-black/40 backdrop-blur-xl">
             <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
 
@@ -259,8 +260,11 @@ export function Navbar() {
                 </button>
             </div>
 
-            {/* Mobile Sidebar Overlay */}
-            {mobileOpen && (
+            </nav>
+
+                {/* Mobile Sidebar Overlay — fuera del <nav> para evitar que el
+                    backdrop-filter cree un stacking context que confine el fixed */}
+                {mobileOpen && (
                 <div
                     className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
                     onClick={() => setMobileOpen(false)}
@@ -376,6 +380,6 @@ export function Navbar() {
                     </div>
                 </div>
             )}
-        </nav>
-    );
+            </>
+        );
 }