From 7491b85d26b1201628bdacca766c042e40d0835f Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 11 Mar 2026 17:42:34 -0400
Subject: [PATCH] Fix dropdown: use absolute positioning instead of fixed
 (backdrop-filter containing block issue)

---
 themes/lucentui/views/components/navigation/index.blade.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/themes/lucentui/views/components/navigation/index.blade.php b/themes/lucentui/views/components/navigation/index.blade.php
index 4f694ce49..44a86772a 100644
--- a/themes/lucentui/views/components/navigation/index.blade.php
+++ b/themes/lucentui/views/components/navigation/index.blade.php
@@ -114,8 +114,8 @@
 
                 <!-- User account -->
                 @if(auth()->check())
-                    <div class="relative hidden lg:block" x-data="{ open: false, dropTop: 0 }">
-                        <button @click="open = !open; if(!open) return; $nextTick(() => { dropTop = $el.getBoundingClientRect().bottom + 8 })" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group">
+                    <div class="relative hidden lg:block" x-data="{ open: false }">
+                        <button @click="open = !open" class="flex items-center gap-3 p-2 rounded-lg transition-all duration-200 group">
                             <div class="relative">
                                 <img src="{{ auth()->user()->avatar }}" class="w-10 h-10 rounded-full border-2 border-background-secondary group-hover:border-blue-500 transition-all duration-300 shadow-lg" alt="avatar" />
                                 <div class="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 rounded-full border-2 border-background shadow-lg" x-show="isOnline" x-transition:enter="transition-all duration-300" x-transition:enter-start="scale-0 opacity-0" x-transition:enter-end="scale-100 opacity-100">
@@ -131,7 +131,7 @@
                             </svg>
                         </button>
 
-                        <div x-show="open" x-transition ... @click.away="open = false" class="fixed right-4 lg:right-8 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50" :style="'top: ' + dropTop + 'px'">
+                        <div x-show="open" x-transition ... @click.away="open = false" class="absolute right-0 top-full mt-2 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50">
                             <div class="p-4 border-b border-neutral">
                                 <div class="flex items-center gap-3">
                                     <img src="{{ auth()->user()->avatar }}" class="rounded-full border-2 border-neutral" alt="avatar" />