Repeater dropdown z-index in modal

[wamesro]

• Laravel Version: 10.48.13
• Nova Version: 4.34.3
• PHP Version: 8.3.8
• Operating System and Version: MacOS
• Browser type and version: Chrome

Description:

When using multiple repeatables, a dropdown with options should appear.

Repeater::make(__('customer.field.addresses'), 'addresses')
    ->repeatables([
        CustomerAddressRepeater::make(__('customer.field.address'), 'address'),
        CustomerCompanyAddressRepeater::make(__('customer.field.company_address'), 'address'),
    ]),

It will show up fine in the resource.

But in the modal window when using via BelongsTo::showCreateRelationButton() is hidden under the modal window.

BelongsTo::make(__('order.field.customer'), 'customer', Customer::class)
    ->showCreateRelationButton(),

<div id="nova-ui-dropdown-menu-6" aria-labelledby="nova-ui-dropdown-button-5" tabindex="0" class="relative z-[50]" data-menu-open="true" dusk="dropdown-menu" style="position: absolute; left: 0px; top: 0px; transform: translate(869px, 446px);">
    <div class="select-none overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 py-1 component-dropdown-menu" style="width: 120px;">
        <button class="space-x-2 block w-full text-left px-3 focus:outline-none rounded truncate whitespace-nowrap text-sm py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 focus:ring cursor-pointer text-gray-500 active:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 dark:active:text-gray-600 component-dropdown-menu-item" type="button">
            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20" class="inline-block component-heroicons-solid-menu component-icon" role="presentation"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></span>
            <span>Osoba</span>
        </button>
        <button class="space-x-2 block w-full text-left px-3 focus:outline-none rounded truncate whitespace-nowrap text-sm py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 focus:ring cursor-pointer text-gray-500 active:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 dark:active:text-gray-600 component-dropdown-menu-item" type="button">
            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20" class="inline-block component-heroicons-solid-menu component-icon" role="presentation"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></span>
            <span>Firma</span>
        </button>
    </div>
</div>

div contains class z-[50] which adds z-index: 50; and in this case it works z-index: 100;