@props(['align' => 'right'])

{{--
    Row action menu (⋯). The popover is positioned `fixed` and anchored to its
    trigger button so it is NEVER clipped by the table's `overflow-x-auto`
    container — a plain `absolute` menu got cut off on the right edge and last
    rows, forcing a scroll. `fixed` is viewport-relative (no ancestor here
    establishes a fixed containing block), so it always renders in full above the
    table. Shared by every admin/client/reseller list, so the fix lands once.
--}}
<div x-data="rfKebab()" data-align="{{ $align }}" class="relative inline-block">
    <button type="button" x-ref="trigger" @click="toggle()" class="rf-icon-btn" style="width:30px;height:30px;">
        <i data-lucide="more-horizontal" style="width:18px;height:18px;"></i>
    </button>
    <div x-ref="menu" x-show="open" x-cloak
         @click.outside="close()" @click="close()"
         @keydown.escape.window="close()"
         x-transition.opacity.duration.120ms
         class="rf-menu" style="position:fixed;margin:0;">
        {{ $slot }}
    </div>
</div>