fix(ui): apply dynamic z-index pattern to resolve searchable select dropdown overlap in user modals

This commit is contained in:
sky121113 2026-05-17 13:24:32 +08:00
parent 4e65aca18e
commit 223fcddbc5
2 changed files with 4 additions and 4 deletions

View File

@ -159,7 +159,7 @@ $roleSelectConfig = [
</div>
@if(auth()->user()->isSystemAdmin())
<div class="space-y-2 relative z-30">
<div class="space-y-2 relative z-10 focus-within:z-30">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Affiliation') }}</label>
<x-searchable-select id="modal-account-company" name="company_id"
placeholder="{{ __('SYSTEM') }}" x-model="currentUser.company_id"
@ -171,7 +171,7 @@ $roleSelectConfig = [
</div>
@endif
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10 focus-within:z-30">
<div class="space-y-2">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Role') }} <span class="text-rose-500">*</span></label>
<div id="role-select-wrapper" class="relative">{{-- Dynamic --}}</div>

View File

@ -96,7 +96,7 @@ $roleSelectConfig = [
</div>
</div>
@if(auth()->user()->isSystemAdmin())
<div class="space-y-2 relative z-30">
<div class="space-y-2 relative z-10 focus-within:z-30">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Affiliation') }}</label>
<x-searchable-select id="modal-account-company" name="company_id" placeholder="{{ __('SYSTEM') }}" x-model="currentUser.company_id" @change="currentUser.company_id = $event.target.value; updateRoleSelect()">
@foreach($companies as $company)
@ -105,7 +105,7 @@ $roleSelectConfig = [
</x-searchable-select>
</div>
@endif
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-20">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10 focus-within:z-30">
<div class="space-y-2">
<label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Role') }} <span class="text-rose-500">*</span></label>
<div id="role-select-wrapper" class="relative">{{-- Dynamic --}}</div>