From 174f229b5de187ffff2ec1f7d8f4b3c814578f89 Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Tue, 21 Apr 2026 06:50:32 +0200
Subject: [PATCH] Fix layout stability: sticky sidebar in Show and sticky
 filters in Index with layout height correction

---
 resources/js/Layouts/AdminLayout.vue          |  2 +-
 resources/js/Pages/Admin/Candidates/Index.vue | 90 ++++++++++---------
 resources/js/Pages/Admin/Candidates/Show.vue  |  2 +-
 3 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
index 4a26199..aae526b 100644
--- a/resources/js/Layouts/AdminLayout.vue
+++ b/resources/js/Layouts/AdminLayout.vue
@@ -82,7 +82,7 @@ const isActive = (item) => {
 <template>
     <EnvironmentBanner />
 
-    <div class="min-h-screen flex bg-neutral font-sans text-ink selection:bg-highlight selection:text-highlight-dark">
+    <div class="h-screen flex bg-neutral font-sans text-ink selection:bg-highlight selection:text-highlight-dark overflow-hidden">
 
         <!-- ─── Sidebar ──────────────────────────────────────────────────── -->
         <aside
diff --git a/resources/js/Pages/Admin/Candidates/Index.vue b/resources/js/Pages/Admin/Candidates/Index.vue
index c988a20..e0e678c 100644
--- a/resources/js/Pages/Admin/Candidates/Index.vue
+++ b/resources/js/Pages/Admin/Candidates/Index.vue
@@ -172,55 +172,57 @@ const batchAnalyze = async () => {
             Gestion des Candidats
         </template>
 
-        <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-6">
-            <div class="space-y-4 w-full md:w-auto">
-                <h3 class="text-3xl font-serif font-black text-primary capitalize tracking-tight flex items-center gap-3">
-                    <div class="w-1.5 h-8 bg-highlight rounded-full"></div>
-                    Liste des Candidats
-                </h3>
-                <div class="flex flex-col sm:flex-row items-center gap-4">
-                    <div class="flex items-center gap-3 bg-white p-2 rounded-xl border border-anthracite/5 shadow-sm min-w-max">
-                        <label class="flex items-center gap-2 cursor-pointer px-2">
-                            <input type="checkbox" v-model="showOnlySelected" class="rounded border-highlight/50 text-highlight focus:ring-highlight/20 cursor-pointer">
-                            <span class="text-xs font-bold text-primary uppercase tracking-widest">Retenus uniquement</span>
-                        </label>
+        <div class="sticky top-[-28px] z-20 bg-neutral/80 backdrop-blur-xl -mx-7 px-7 pt-7 pb-6 mb-4 border-b border-ink/[0.03]">
+            <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
+                <div class="space-y-4 w-full md:w-auto">
+                    <h3 class="text-3xl font-serif font-black text-primary capitalize tracking-tight flex items-center gap-3">
+                        <div class="w-1.5 h-8 bg-highlight rounded-full"></div>
+                        Liste des Candidats
+                    </h3>
+                    <div class="flex flex-col sm:flex-row items-center gap-4">
+                        <div class="flex items-center gap-3 bg-white p-2 rounded-xl border border-anthracite/5 shadow-sm min-w-max">
+                            <label class="flex items-center gap-2 cursor-pointer px-2">
+                                <input type="checkbox" v-model="showOnlySelected" class="rounded border-highlight/50 text-highlight focus:ring-highlight/20 cursor-pointer">
+                                <span class="text-xs font-bold text-primary uppercase tracking-widest">Retenus uniquement</span>
+                            </label>
+                        </div>
+                        <div class="flex items-center gap-3 w-full sm:w-auto">
+                            <select 
+                                v-model="selectedJobPosition" 
+                                class="block w-full sm:w-72 rounded-xl border-anthracite/10 shadow-sm focus:border-primary focus:ring-primary/20 text-sm font-medium text-anthracite transition-all"
+                            >
+                                <option value="">Toutes les fiches de poste</option>
+                                <option value="none" class="italic">➜ Candidature Spontanée</option>
+                                <option v-for="jp in jobPositions" :key="jp.id" :value="jp.id">
+                                    {{ jp.title }}
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                    <div class="flex items-center gap-3 w-full sm:w-auto">
-                        <select 
-                            v-model="selectedJobPosition" 
-                            class="block w-full sm:w-72 rounded-xl border-anthracite/10 shadow-sm focus:border-primary focus:ring-primary/20 text-sm font-medium text-anthracite transition-all"
+                </div>
+                <div class="flex items-center gap-4 w-full md:w-auto justify-end">
+                    <div v-if="selectedIds.length > 0" class="flex items-center gap-3 animate-in fade-in slide-in-from-right-4 duration-300">
+                        <span class="text-xs font-black uppercase tracking-widest text-primary/50">{{ selectedIds.length }} sélectionné(s)</span>
+                        <PrimaryButton 
+                            @click="batchAnalyze" 
+                            :disabled="isBatchAnalyzing"
+                            class="!bg-primary hover:!bg-primary/90 !text-white flex items-center gap-2 shadow-primary/20"
                         >
-                            <option value="">Toutes les fiches de poste</option>
-                            <option value="none" class="italic">➜ Candidature Spontanée</option>
-                            <option v-for="jp in jobPositions" :key="jp.id" :value="jp.id">
-                                {{ jp.title }}
-                            </option>
-                        </select>
+                            <svg v-if="isBatchAnalyzing" class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 21v-1m4.243-4.243l-.707-.707m2.828-9.9l-.707.707" />
+                            </svg>
+                            {{ isBatchAnalyzing ? `Analyse ${analysisProgress.current}/${analysisProgress.total}...` : 'Analyse IA groupée' }}
+                        </PrimaryButton>
+                        <div class="h-8 w-px bg-anthracite/10 mx-2 hidden sm:block"></div>
                     </div>
-                </div>
-            </div>
-            <div class="flex items-center gap-4 w-full md:w-auto justify-end">
-                <div v-if="selectedIds.length > 0" class="flex items-center gap-3 animate-in fade-in slide-in-from-right-4 duration-300">
-                    <span class="text-xs font-black uppercase tracking-widest text-primary/50">{{ selectedIds.length }} sélectionné(s)</span>
-                    <PrimaryButton 
-                        @click="batchAnalyze" 
-                        :disabled="isBatchAnalyzing"
-                        class="!bg-primary hover:!bg-primary/90 !text-white flex items-center gap-2 shadow-primary/20"
-                    >
-                        <svg v-if="isBatchAnalyzing" class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
-                        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 21v-1m4.243-4.243l-.707-.707m2.828-9.9l-.707.707" />
-                        </svg>
-                        {{ isBatchAnalyzing ? `Analyse ${analysisProgress.current}/${analysisProgress.total}...` : 'Analyse IA groupée' }}
+                    <PrimaryButton @click="isModalOpen = true">
+                        Ajouter un Candidat
                     </PrimaryButton>
-                    <div class="h-8 w-px bg-anthracite/10 mx-2 hidden sm:block"></div>
                 </div>
-                <PrimaryButton @click="isModalOpen = true">
-                    Ajouter un Candidat
-                </PrimaryButton>
             </div>
         </div>
 
diff --git a/resources/js/Pages/Admin/Candidates/Show.vue b/resources/js/Pages/Admin/Candidates/Show.vue
index fa80716..479e74b 100644
--- a/resources/js/Pages/Admin/Candidates/Show.vue
+++ b/resources/js/Pages/Admin/Candidates/Show.vue
@@ -255,7 +255,7 @@ const barColor  = (pct) => pct >= 80 ? 'bg-success' : pct >= 60 ? 'bg-highlight'
         <div class="flex gap-5 items-start">
 
             <!-- ══ Left panel ══════════════════════════════════════════════ -->
-            <div class="w-[280px] shrink-0 flex flex-col gap-4">
+            <div class="w-[280px] shrink-0 flex flex-col gap-4 sticky top-0 self-start">
 
                 <!-- Identity card -->
                 <div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm">