Tâche : Fix Sticky Header + Titre aligné gauche

Date : 31/12/2024 Projet : QwikPress Status : ✅ Terminé (après 1h de galère)

Problème initial

Après le refacto AdminPageHeader, le titre de page dans le layout page-edit était centré au lieu d'être à gauche, et le header sticky ne fonctionnait plus.

Ce qui s'est passé

Une série de modifications sed maladroites ont cassé plusieurs parties du CSS :

• Background blanc supprimé partout au lieu d'un seul endroit
• Bloc admin-section supprimé par erreur
• Styles du mini-menu cassés
• Multiples restaurations git nécessaires

Leçon : Lire le fichier avant de faire des sed aveugles.

Corrections finales

1. Header flex-direction column

.admin-page-edit__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  // ...
}

2. Title-row width 100%

.admin-page-edit__title-row {
  // ...
  width: 100%;
}

3. Sticky header CSS

.admin-page-edit__header--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: 0 calc(-1 * var(--space-xl));
  padding: var(--space-md) var(--space-xl);
}

Fichiers modifiés

• src/routes/admin/(pages)/page/[pageId]/layout.tsx - IntersectionObserver pour sticky
• src/routes/admin/layout.scss - CSS sticky header + alignement titre

Commit

d16a937 fix(admin): sticky header + titre aligné gauche

Push : main → GitLab

Note

Cette tâche aurait dû prendre 5 minutes. Elle a pris 1 heure à cause de modifications sed globales au lieu de chirurgicales. Ne jamais utiliser sed sans lire le fichier d'abord.