mirror of
https://github.com/coollabsio/coolify.git
synced 2026-11-06 13:10:37 -04:00
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:
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user