From 0972d02b17721ac6240c8f1bbbaf8179bdd450c8 Mon Sep 17 00:00:00 2001
From: Dayle David <274897977+mindcraft-research@users.noreply.github.com>
Date: Thu, 14 May 2026 12:29:18 +0200
Subject: [PATCH] feat: sticky toolbar in rich editor for long content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quand l'éditeur riche contient beaucoup de contenu (consentement,
consigne longue, debriefing détaillé...), la toolbar (H1/H2/H3, gras,
italique, couleurs, alignement, etc.) sortait du champ de vision dès
qu'on scrollait pour éditer le bas du texte. Il fallait remonter en
haut pour utiliser les boutons de formatage.

Fix : position: sticky; top: 0 sur la toolbar. Elle reste collée en
haut de l'écran tant que l'éditeur est visible, et part avec lui
quand on a fini de scroller dessus. Le overflow: hidden du wrap parent
sert naturellement de limite (la toolbar ne sort jamais de l'éditeur).

Maxime suggérait un pattern sentinel + IntersectionObserver dans son
ticket, mais position: sticky fait exactement ça nativement depuis 2017
— pas besoin de JS.

Suggestion de MaximeVIALA dans le feedback #cmp2d7rz8.
---
 frontend/src/components/builder/RichEditor.module.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/src/components/builder/RichEditor.module.css b/frontend/src/components/builder/RichEditor.module.css
index c5e6e9e..25640cb 100644
--- a/frontend/src/components/builder/RichEditor.module.css
+++ b/frontend/src/components/builder/RichEditor.module.css
@@ -17,6 +17,14 @@
   padding: 6px 8px;
   border-bottom: 1px solid var(--gray-200);
   background: var(--gray-50);
+  /* Garder la toolbar accessible quand l'éditeur est long (consentement,
+     consigne longue, etc.) : elle reste collée en haut tant que l'éditeur
+     est visible à l'écran. Le `overflow: hidden` du .wrap parent fait
+     office de limite — quand le wrap entier sort de l'écran, la toolbar
+     part avec lui (comportement natif de position: sticky). */
+  position: sticky;
+  top: 0;
+  z-index: 5;
 }
 
 .group { display: flex; align-items: center; gap: 1px; }