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> </div>
@if(auth()->user()->isSystemAdmin()) @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> <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" <x-searchable-select id="modal-account-company" name="company_id"
placeholder="{{ __('SYSTEM') }}" x-model="currentUser.company_id" placeholder="{{ __('SYSTEM') }}" x-model="currentUser.company_id"
@ -171,7 +171,7 @@ $roleSelectConfig = [
</div> </div>
@endif @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"> <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> <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> <div id="role-select-wrapper" class="relative">{{-- Dynamic --}}</div>

View File

@ -96,7 +96,7 @@ $roleSelectConfig = [
</div> </div>
</div> </div>
@if(auth()->user()->isSystemAdmin()) @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> <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()"> <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) @foreach($companies as $company)
@ -105,7 +105,7 @@ $roleSelectConfig = [
</x-searchable-select> </x-searchable-select>
</div> </div>
@endif @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"> <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> <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> <div id="role-select-wrapper" class="relative">{{-- Dynamic --}}</div>