From 4222ba6e359695ce2cac864dd2062a5e77a49bf5 Mon Sep 17 00:00:00 2001
From: Ian Macabulos <iannmacabulos@gmail.com>
Date: Thu, 9 Apr 2026 21:00:06 +0800
Subject: [PATCH] fix: dropdown issue

---
 .../livewire/cover-letter-index.blade.php     | 249 +++++++++---------
 1 file changed, 126 insertions(+), 123 deletions(-)

diff --git a/resources/views/livewire/cover-letter-index.blade.php b/resources/views/livewire/cover-letter-index.blade.php
index 7457c9a..a285d82 100644
--- a/resources/views/livewire/cover-letter-index.blade.php
+++ b/resources/views/livewire/cover-letter-index.blade.php
@@ -12,7 +12,7 @@
                 Manage and edit tailored cover letters for your applications.
             </p>
         </div>
-        
+
         <div class="flex gap-3 w-full md:w-auto">
             <button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-cover-letter-modal')"
                 class="w-full md:w-auto justify-center px-6 py-3 bg-[#e26a35] text-white rounded-xl text-sm font-bold tracking-tight hover:bg-[#cf5b29] hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 inline-flex items-center gap-2">
@@ -72,155 +72,158 @@ class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 bg-white text-
             class="absolute inset-0 z-10 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 bg-[#f9fafb]">
             @for ($i = 0; $i < 6; $i++)
                 <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm flex flex-col h-full animate-pulse">
-                    <div class="h-7 w-24 bg-gray-200 rounded-full mb-6"></div>
-                    <div class="mb-8 flex-1">
-                        <div class="h-6 w-3/4 bg-gray-200 rounded-md mb-4"></div>
-                        <div class="h-4 w-1/2 bg-gray-100 rounded-md"></div>
-                    </div>
+                <div class="h-7 w-24 bg-gray-200 rounded-full mb-6"></div>
+                <div class="mb-8 flex-1">
+                    <div class="h-6 w-3/4 bg-gray-200 rounded-md mb-4"></div>
+                    <div class="h-4 w-1/2 bg-gray-100 rounded-md"></div>
                 </div>
-            @endfor
         </div>
+        @endfor
+    </div>
 
-        <div wire:loading.remove wire:target="search, gotoPage">
-            @if($jobs->count() > 0)
-                <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-                    @foreach($jobs as $job)
-                        <div wire:key="job-card-{{ $job->id }}"
-                            class="bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-md hover:border-[#e26a35]/40 hover:-translate-y-1 transition-all duration-300 flex flex-col p-6 group h-full">
-
-                            <div class="flex justify-between items-start mb-6 shrink-0">
-                                <div class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-green-50 text-green-700 border border-green-200">
-                                    Draft Saved
-                                </div>
-                                <div class="flex items-center gap-1.5 text-xs font-bold text-gray-400 bg-gray-50 px-2.5 py-1.5 rounded-lg border border-gray-100">
-                                    <x-heroicon-o-calendar class="w-3.5 h-3.5" />
-                                    {{ $job->updated_at->format('M d') }}
-                                </div>
-                            </div>
-
-                            <div class="mb-6 flex-1">
-                                <h3 class="text-xl font-extrabold text-gray-900 leading-tight mb-2 group-hover:text-[#e26a35] transition-colors">
-                                    {{ $job->title }}
-                                </h3>
-                                <div class="flex items-center gap-2 text-sm font-semibold text-gray-500">
-                                    <x-heroicon-o-building-office-2 class="w-4 h-4 opacity-70" />
-                                    {{ $job->company }}
-                                </div>
-                            </div>
-
-                            <div class="pt-5 border-t border-gray-100 flex items-center justify-between mt-auto shrink-0">
-                                <a href="{{ route('cover-letters.edit', $job) }}"
-                                    class="text-sm font-bold text-gray-600 hover:text-[#e26a35] transition-colors flex items-center gap-1.5 group/link">
-                                    Open Workspace
-                                    <x-heroicon-o-arrow-up-right
-                                        class="w-4 h-4 opacity-0 -translate-y-1 translate-x-1 group-hover/link:opacity-100 group-hover/link:translate-y-0 group-hover/link:translate-x-0 transition-all duration-300" />
-                                </a>
-
-                                <button type="button" @click="$wire.confirmDelete({{ $job->id }}); showDeleteModal = true"
-                                    class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
-                                    <x-heroicon-o-trash class="w-5 h-5" />
-                                </button>
-                            </div>
-                        </div>
-                    @endforeach
-                </div>
+    <div wire:loading.remove wire:target="search, gotoPage">
+        @if($jobs->count() > 0)
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+            @foreach($jobs as $job)
+            <div wire:key="job-card-{{ $job->id }}"
+                class="bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-md hover:border-[#e26a35]/40 hover:-translate-y-1 transition-all duration-300 flex flex-col p-6 group h-full">
 
-                @if($jobs->hasPages())
-                    <div class="mt-10 custom-pagination">
-                        {{ $jobs->links() }}
+                <div class="flex justify-between items-start mb-6 shrink-0">
+                    <div class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-green-50 text-green-700 border border-green-200">
+                        Draft Saved
                     </div>
-                @endif
-            @else
-                <div class="w-full bg-white rounded-3xl border border-gray-200 flex flex-col items-center justify-center text-center p-16 sm:p-24 shadow-sm">
-                    <div class="w-20 h-20 bg-[#fff5f0] rounded-2xl flex items-center justify-center mb-6 shadow-inner border border-[#e26a35]/10">
-                        <x-heroicon-o-envelope class="w-10 h-10 text-[#e26a35]" />
+                    <div class="flex items-center gap-1.5 text-xs font-bold text-gray-400 bg-gray-50 px-2.5 py-1.5 rounded-lg border border-gray-100">
+                        <x-heroicon-o-calendar class="w-3.5 h-3.5" />
+                        {{ $job->updated_at->format('M d') }}
                     </div>
-                    <h3 class="text-2xl font-extrabold text-gray-900 mb-3 tracking-tight">No Cover Letters Yet</h3>
-                    <p class="text-base font-medium text-gray-500 max-w-md mx-auto mb-8">
-                        You have not generated any cover letters yet. Click the button above to select a job application and start drafting.
-                    </p>
-                    <button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-cover-letter-modal')"
-                        class="px-6 py-3 bg-[#e26a35] text-white rounded-xl text-sm font-bold tracking-tight hover:bg-[#cf5b29] hover:shadow-lg transition-all duration-200 inline-flex items-center gap-2">
-                        <x-heroicon-o-document-plus class="w-5 h-5" />
-                        Generate New Letter
+                </div>
+
+                <div class="mb-6 flex-1">
+                    <h3 class="text-xl font-extrabold text-gray-900 leading-tight mb-2 group-hover:text-[#e26a35] transition-colors">
+                        {{ $job->title }}
+                    </h3>
+                    <div class="flex items-center gap-2 text-sm font-semibold text-gray-500">
+                        <x-heroicon-o-building-office-2 class="w-4 h-4 opacity-70" />
+                        {{ $job->company }}
+                    </div>
+                </div>
+
+                <div class="pt-5 border-t border-gray-100 flex items-center justify-between mt-auto shrink-0">
+                    <a href="{{ route('cover-letters.edit', $job) }}"
+                        class="text-sm font-bold text-gray-600 hover:text-[#e26a35] transition-colors flex items-center gap-1.5 group/link">
+                        Open Workspace
+                        <x-heroicon-o-arrow-up-right
+                            class="w-4 h-4 opacity-0 -translate-y-1 translate-x-1 group-hover/link:opacity-100 group-hover/link:translate-y-0 group-hover/link:translate-x-0 transition-all duration-300" />
+                    </a>
+
+                    <button type="button" @click="$wire.confirmDelete({{ $job->id }}); showDeleteModal = true"
+                        class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
+                        <x-heroicon-o-trash class="w-5 h-5" />
                     </button>
                 </div>
-            @endif
+            </div>
+            @endforeach
+        </div>
+
+        @if($jobs->hasPages())
+        <div class="mt-10 custom-pagination">
+            {{ $jobs->links() }}
+        </div>
+        @endif
+        @else
+        <div class="w-full bg-white rounded-3xl border border-gray-200 flex flex-col items-center justify-center text-center p-16 sm:p-24 shadow-sm">
+            <div class="w-20 h-20 bg-[#fff5f0] rounded-2xl flex items-center justify-center mb-6 shadow-inner border border-[#e26a35]/10">
+                <x-heroicon-o-envelope class="w-10 h-10 text-[#e26a35]" />
+            </div>
+            <h3 class="text-2xl font-extrabold text-gray-900 mb-3 tracking-tight">No Cover Letters Yet</h3>
+            <p class="text-base font-medium text-gray-500 max-w-md mx-auto mb-8">
+                You have not generated any cover letters yet. Click the button above to select a job application and start drafting.
+            </p>
+            <button x-data="" x-on:click.prevent="$dispatch('open-modal', 'create-cover-letter-modal')"
+                class="px-6 py-3 bg-[#e26a35] text-white rounded-xl text-sm font-bold tracking-tight hover:bg-[#cf5b29] hover:shadow-lg transition-all duration-200 inline-flex items-center gap-2">
+                <x-heroicon-o-document-plus class="w-5 h-5" />
+                Generate New Letter
+            </button>
         </div>
+        @endif
     </div>
+</div>
 
-    <x-modal name="create-cover-letter-modal" maxWidth="md">
-        <div class="relative overflow-hidden bg-white rounded-2xl">
-            <div class="bg-gradient-to-b from-[#fff5f0] to-white px-6 py-8 border-b border-gray-100 text-center">
-                <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm border border-[#e26a35]/20">
-                    <x-heroicon-o-document-plus class="w-8 h-8 text-[#e26a35]" />
-                </div>
-                <h2 class="text-2xl font-extrabold text-gray-900 tracking-tight mb-2">New Cover Letter</h2>
-                <p class="text-sm font-medium text-gray-500 max-w-xs mx-auto">Select a target application to generate a tailored letter using your primary resume.</p>
+<x-modal name="create-cover-letter-modal" maxWidth="md" align="center">
+    <div class="relative bg-white rounded-2xl mx-auto w-full">
+        <div class="bg-gradient-to-b from-[#fff5f0] to-white px-6 py-8 border-b border-gray-100 text-center rounded-t-2xl">
+            <div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm border border-[#e26a35]/20">
+                <x-heroicon-o-document-plus class="w-8 h-8 text-[#e26a35]" />
             </div>
-            
-            <div class="p-6">
-                <div class="mb-8">
-                    <label class="block text-sm font-bold text-gray-700 mb-2">Target Application</label>
-                    
-                    <div x-data="{ open: false, selectedId: @entangle('selectedJobForNewLetter') }" class="relative">
-                        <button type="button" @click="open = !open" @click.outside="open = false"
-                            class="w-full flex justify-between items-center rounded-xl border border-gray-300 py-3 pl-4 pr-4 text-gray-900 font-medium focus:outline-none focus:border-[#e26a35] focus:ring-2 focus:ring-[#e26a35]/20 shadow-sm bg-gray-50 hover:bg-white transition-all cursor-pointer text-left h-[50px]">
-                            
-                            <span x-show="!selectedId" class="text-gray-500 truncate pr-4">-- Choose an application --</span>
-                            
-                            @foreach($availableJobs as $job)
-                                <span x-show="selectedId == {{ $job->id }}" x-cloak class="truncate pr-4">
-                                    {{ $job->title }} <span class="text-gray-500 font-normal">at {{ $job->company }}</span>
-                                </span>
-                            @endforeach
+            <h2 class="text-2xl font-extrabold text-gray-900 tracking-tight mb-2">New Cover Letter</h2>
+            <p class="text-sm font-medium text-gray-500 max-w-xs mx-auto">Select a target application to generate a tailored letter using your primary resume.</p>
+        </div>
+
+        <div class="p-6" x-data="{ open: false, selectedId: @entangle('selectedJobForNewLetter') }">
+            <div class="mb-8">
+                <label class="block text-sm font-bold text-gray-700 mb-2">Target Application</label>
+
+                <div class="relative w-full">
+                    <button x-ref="targetSelect" type="button" @click="open = !open" @click.outside="open = false"
+                        class="w-full flex justify-between items-center rounded-xl border border-gray-300 py-3 pl-4 pr-4 text-gray-900 font-medium focus:outline-none focus:border-[#e26a35] focus:ring-2 focus:ring-[#e26a35]/20 shadow-sm bg-gray-50 hover:bg-white transition-all cursor-pointer text-left h-[50px]">
 
-                            <x-heroicon-o-chevron-down class="w-5 h-5 text-gray-500 shrink-0 transition-transform duration-200" x-bind:class="open ? 'rotate-180' : ''" />
-                        </button>
+                        <span x-show="!selectedId" class="text-gray-500 truncate pr-4">Choose an application</span>
 
+                        @foreach($availableJobs as $job)
+                        <span x-show="selectedId == {{ $job->id }}" x-cloak class="truncate pr-4">
+                            {{ $job->title }} <span class="text-gray-500 font-normal">at {{ $job->company }}</span>
+                        </span>
+                        @endforeach
+
+                        <x-heroicon-o-chevron-down class="w-5 h-5 text-gray-500 shrink-0 transition-transform duration-200" x-bind:class="open ? 'rotate-180' : ''" />
+                    </button>
+
+                    <template x-teleport="body">
                         <div x-show="open" x-cloak x-transition.opacity
-                            class="absolute z-50 mt-2 w-full rounded-xl bg-white shadow-xl border border-gray-100 overflow-hidden py-2 max-h-60 overflow-y-auto custom-scrollbar">
-                            
+                            x-anchor.bottom-start.offset.4="$refs.targetSelect"
+                            class="absolute {{ env('VITE_PORTAL_Z_INDEX_CLASS', 'z-[9999]') }} min-w-[300px] w-full max-w-md rounded-xl bg-white shadow-xl border border-gray-100 overflow-hidden py-2 max-h-60 overflow-y-auto custom-scrollbar">
+
                             <button type="button" @click="selectedId = ''; open = false"
                                 class="w-full text-left px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
                                 :class="selectedId == '' ? 'bg-gray-50 text-gray-900' : 'text-gray-500'">
-                                -- Choose an application --
+                                Choose an application
                             </button>
-                            
+
                             @foreach($availableJobs as $availableJob)
-                                <button type="button" @click="selectedId = {{ $availableJob->id }}; open = false"
-                                    class="w-full text-left px-5 py-2.5 text-sm font-semibold transition-colors truncate"
-                                    :class="selectedId == {{ $availableJob->id }} ? 'bg-[#fff5f0] text-[#e26a35]' : 'text-gray-700 hover:bg-[#fff5f0] hover:text-[#e26a35]'">
-                                    {{ $availableJob->title }} <span class="text-gray-400 font-normal">at {{ $availableJob->company }}</span>
-                                </button>
+                            <button type="button" @click="selectedId = {{ $availableJob->id }}; open = false"
+                                class="w-full text-left px-5 py-2.5 text-sm font-semibold transition-colors truncate"
+                                :class="selectedId == {{ $availableJob->id }} ? 'bg-[#fff5f0] text-[#e26a35]' : 'text-gray-700 hover:bg-[#fff5f0] hover:text-[#e26a35]'">
+                                {{ $availableJob->title }} <span class="text-gray-400 font-normal">at {{ $availableJob->company }}</span>
+                            </button>
                             @endforeach
-                            
+
                             @if(count($availableJobs) === 0)
-                                <div class="px-5 py-3 text-sm text-gray-500 italic">No applications available.</div>
+                            <div class="px-5 py-3 text-sm text-gray-500 italic">No applications available.</div>
                             @endif
                         </div>
-                    </div>
-                    
-                    @error('selectedJobForNewLetter') <span class="text-red-500 text-sm font-medium mt-2 block">{{ $message }}</span> @enderror
+                    </template>
                 </div>
 
-                <div class="flex flex-col gap-3">
-                    <button wire:click="startWorkspace" 
-                        class="w-full flex justify-center items-center gap-2 px-4 py-3.5 text-sm font-bold text-white bg-[#e26a35] rounded-xl hover:bg-[#cf5b29] disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm" 
-                        @if(empty($selectedJobForNewLetter)) disabled @endif>
-                        Continue to Editor
-                        <x-heroicon-o-arrow-right class="w-4 h-4" />
-                    </button>
-                    <button type="button" x-on:click="$dispatch('close-modal', 'create-cover-letter-modal')" 
-                        class="w-full px-4 py-3 text-sm font-bold text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
-                        Cancel
-                    </button>
-                </div>
+                @error('selectedJobForNewLetter') <span class="text-red-500 text-sm font-medium mt-2 block">{{ $message }}</span> @enderror
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <button wire:click="startWorkspace"
+                    class="w-full flex justify-center items-center gap-2 px-4 py-3.5 text-sm font-bold text-white bg-[#e26a35] rounded-xl hover:bg-[#cf5b29] disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm"
+                    :disabled="!selectedId">
+                    Continue to Editor
+                    <x-heroicon-o-arrow-right class="w-4 h-4" />
+                </button>
+                <button type="button" x-on:click="$dispatch('close-modal', 'create-cover-letter-modal')"
+                    class="w-full px-4 py-3 text-sm font-bold text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors">
+                    Cancel
+                </button>
             </div>
         </div>
-    </x-modal>
+    </div>
+</x-modal>
 
-    <x-delete-modal show="showDeleteModal" title="Delete Cover Letter"
-        description="Are you sure you want to remove this cover letter? This will not delete the job application, only the drafted text. This action cannot be undone."
-        on-confirm="executeDelete" on-cancel="cancelDelete" />
+<x-delete-modal show="showDeleteModal" title="Delete Cover Letter"
+    description="Are you sure you want to remove this cover letter? This will not delete the job application, only the drafted text. This action cannot be undone."
+    on-confirm="executeDelete" on-cancel="cancelDelete" />
 </div>
\ No newline at end of file