Fix layout stability: sticky sidebar in Show and sticky filters in Index with layout height correction

This commit is contained in:
jeremy bayse
2026-04-21 06:50:32 +02:00
parent 2216de1a02
commit 174f229b5d
3 changed files with 48 additions and 46 deletions

View File

@@ -82,7 +82,7 @@ const isActive = (item) => {
<template> <template>
<EnvironmentBanner /> <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 --> <!-- Sidebar -->
<aside <aside

View File

@@ -172,7 +172,8 @@ const batchAnalyze = async () => {
Gestion des Candidats Gestion des Candidats
</template> </template>
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 gap-6"> <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"> <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"> <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> <div class="w-1.5 h-8 bg-highlight rounded-full"></div>
@@ -223,6 +224,7 @@ const batchAnalyze = async () => {
</PrimaryButton> </PrimaryButton>
</div> </div>
</div> </div>
</div>
<!-- Flash Messages --> <!-- Flash Messages -->
<div v-if="flashSuccess" class="mb-8 p-6 bg-emerald-50 border border-emerald-200 rounded-2xl flex items-center gap-4 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm"> <div v-if="flashSuccess" class="mb-8 p-6 bg-emerald-50 border border-emerald-200 rounded-2xl flex items-center gap-4 animate-in fade-in slide-in-from-top-4 duration-500 shadow-sm">

View File

@@ -255,7 +255,7 @@ const barColor = (pct) => pct >= 80 ? 'bg-success' : pct >= 60 ? 'bg-highlight'
<div class="flex gap-5 items-start"> <div class="flex gap-5 items-start">
<!-- Left panel --> <!-- 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 --> <!-- Identity card -->
<div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm"> <div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm">