fix(team): teleport member manage menu to body to avoid clipping

Render the member "Manage" dropdown via x-teleport and anchor it to the
trigger button with x-anchor so it is no longer clipped by overflow
containers. Outside clicks on the trigger are ignored to prevent
immediate re-toggling.

Also hide the dashboard activity column unless it contains a section.
This commit is contained in:
Andras Bacsai
2026-10-15 08:50:08 +02:00
parent fdd69977a4
commit c246b09075
2 changed files with 46 additions and 44 deletions
+1 -1
View File
@@ -67,7 +67,7 @@
{{-- Wide screens: activity takes the left third, projects and servers the other two thirds.
It stays one column while the left side has no section (no deployments, no traffic). --}}
<div class="grid min-w-0 gap-8 xl:items-start xl:has-[.dashboard-activity_section]:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]">
<div class="dashboard-activity flex min-w-0 flex-col gap-8">
<div class="dashboard-activity hidden min-w-0 has-[section]:flex flex-col gap-8">
<livewire:dashboard.active-deployments />
@if ($hasTrafficAnalytics)
+45 -43
View File
@@ -40,52 +40,54 @@
<div class="flex justify-end">
@can('manageMembers', currentTeam())
@if ($member->id !== Auth::id())
<div class="relative" x-data="{ open: false }" @keydown.escape.window="open = false"
@click.outside="open = false">
<button type="button" class="button h-7! px-2.5! text-[11px]!" @click="open = !open"
aria-haspopup="menu" :aria-expanded="open">
<div x-data="{ open: false }" @keydown.escape.window="open = false">
<button type="button" class="button h-7! px-2.5! text-[11px]!" x-ref="trigger"
@click="open = !open" aria-haspopup="menu" :aria-expanded="open">
Manage
</button>
<div x-show="open" x-cloak role="menu"
class="listbox-panel top-full! right-0! left-auto! mt-1! w-36! min-w-0!">
@if (Auth::user()->isOwner())
@if (data_get($member, 'pivot.role') !== 'owner')
<button type="button" class="listbox-option justify-start!" wire:click="makeOwner"
@click="open = false">
Make owner
</button>
<template x-teleport="body">
<div x-show="open" x-cloak role="menu" x-anchor.bottom-end.fixed.offset.4="$refs.trigger"
@click.outside="if (! $refs.trigger.contains($event.target)) open = false"
class="listbox-panel w-36! min-w-0! z-50!">
@if (Auth::user()->isOwner())
@if (data_get($member, 'pivot.role') !== 'owner')
<button type="button" class="listbox-option justify-start!" wire:click="makeOwner"
@click="open = false">
Make owner
</button>
@endif
@if (data_get($member, 'pivot.role') !== 'admin')
<button type="button" class="listbox-option justify-start!" wire:click="makeAdmin"
@click="open = false">
Make admin
</button>
@endif
@if (data_get($member, 'pivot.role') !== 'member')
<button type="button" class="listbox-option justify-start!"
wire:click="makeReadonly" @click="open = false">
Make member
</button>
@endif
@elseif (Auth::user()->isAdmin())
@if (data_get($member, 'pivot.role') === 'admin')
<button type="button" class="listbox-option justify-start!"
wire:click="makeReadonly" @click="open = false">
Make member
</button>
@elseif (data_get($member, 'pivot.role') === 'member')
<button type="button" class="listbox-option justify-start!" wire:click="makeAdmin"
@click="open = false">
Make admin
</button>
@endif
@endif
@if (data_get($member, 'pivot.role') !== 'admin')
<button type="button" class="listbox-option justify-start!" wire:click="makeAdmin"
@click="open = false">
Make admin
</button>
@endif
@if (data_get($member, 'pivot.role') !== 'member')
<button type="button" class="listbox-option justify-start!"
wire:click="makeReadonly" @click="open = false">
Make member
</button>
@endif
@elseif (Auth::user()->isAdmin())
@if (data_get($member, 'pivot.role') === 'admin')
<button type="button" class="listbox-option justify-start!"
wire:click="makeReadonly" @click="open = false">
Make member
</button>
@elseif (data_get($member, 'pivot.role') === 'member')
<button type="button" class="listbox-option justify-start!" wire:click="makeAdmin"
@click="open = false">
Make admin
</button>
@endif
@endif
<div class="my-1 border-t border-neutral-200 dark:border-white/[0.08]"></div>
<button type="button" class="listbox-option justify-start! text-error! hover:text-error!"
wire:click="remove" @click="open = false">
Remove member
</button>
</div>
<div class="my-1 border-t border-neutral-200 dark:border-white/[0.08]"></div>
<button type="button" class="listbox-option justify-start! text-error! hover:text-error!"
wire:click="remove" @click="open = false">
Remove member
</button>
</div>
</template>
</div>
@endif
@endcan