Fix layout stability: sticky sidebar in Show and sticky filters in Index with layout height correction
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user