From 15df731e37962a8b2f9586e2ea8437f2fef755f5 Mon Sep 17 00:00:00 2001
From: dmitriylaukhin <laukhin@dementiy.com>
Date: Sat, 25 Apr 2026 18:10:07 +0500
Subject: [PATCH] Make lesson editor header and toolbar sticky on scroll

Both the controls bar (Save button, publish toggle) and the formatting
toolbar now stick to the top of the viewport while editing long lessons.
Header sticks at top: 0, toolbar sticks just below it at top: 62px.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/admin/lesson-editor.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/lesson-editor.tsx b/src/components/admin/lesson-editor.tsx
index d8b205a..b1c501f 100644
--- a/src/components/admin/lesson-editor.tsx
+++ b/src/components/admin/lesson-editor.tsx
@@ -154,7 +154,22 @@ export function LessonEditor({
   return (
     <div className="space-y-5">
       {/* Header controls */}
-      <div className="flex items-center justify-between gap-2 flex-wrap">
+      <div
+        className="flex items-center justify-between gap-2 flex-wrap"
+        style={{
+          position: "sticky",
+          top: 0,
+          zIndex: 30,
+          background: "var(--background)",
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+          paddingTop: "0.75rem",
+          paddingBottom: "0.75rem",
+          borderBottom: "2px solid var(--border)",
+        }}
+      >
         {/* Left: published toggle + prev/next */}
         <div className="flex items-center gap-3">
           <button
@@ -289,7 +304,14 @@ export function LessonEditor({
         {/* Toolbar */}
         <div
           className="flex flex-wrap gap-0.5 p-2"
-          style={{ border: "2px solid var(--border)", borderBottom: "1px solid var(--border)", background: "var(--color-surface)" }}
+          style={{
+            position: "sticky",
+            top: "62px",
+            zIndex: 20,
+            border: "2px solid var(--border)",
+            borderBottom: "1px solid var(--border)",
+            background: "var(--color-surface)",
+          }}
         >
           {/* Text style */}
           <ToolBtn onClick={() => editor?.chain().focus().toggleBold().run()} active={editor?.isActive("bold")}><strong>Ж</strong></ToolBtn>