style: adjust user account dropdown position for improved visibility

This commit is contained in:
2026-03-11 17:31:58 -04:00
parent 7a89154c7a
commit 4748238150

View File

@@ -114,8 +114,8 @@
<!-- User account -->
@if(auth()->check())
<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 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">
<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="absolute -right-4 lg:-right-8 mt-2 w-72 bg-background-secondary border border-neutral rounded-2xl shadow-2xl z-50">
<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 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" />