Changeset 7d81265 in Klonkt

Timestamp:

06/19/2026 12:24:21 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

9217e4e

Parents:

859bace0

Message:

fix(editor): toolbar sticky inside the scroll box on mobile

The frame is now the scroll box (max-height 70vh, overflow auto); the
text scrolls inside it and the formatting toolbar (position:sticky top:0)
stays pinned at the top of the box. Caret scroll stays within the box →
no page jump. Fullscreen is excluded.

Co-Authored-By: Claude <noreply@…>

Files:

• CHANGELOG.md (modified) (1 diff)
• src/views/pages/post-edit.ejs (modified) (1 diff)

CHANGELOG.md

@@ -16 +16 @@
 ### Opgelost
 - Editor: het beeld verspringt niet meer bij het aanklikken van een opmaakknop.
-  Op mobiel heeft het schrijfveld nu een begrensde hoogte met eigen interne scroll
-  (een "box"), zodat de caret-scroll die mobiel Chrome forceert binnen de box blijft
-  i.p.v. de hele pagina te laten verspringen. De toolbar staat sticky erboven.
-  (Plus: scrollpositie wordt vastgehouden rond elk opmaak-commando.)
+  Op mobiel is het schrijfveld nu een begrensde scroll-box met de opmaak-toolbar
+  STICKY bovenin: de tekst scrollt eronder, de toolbar blijft altijd in beeld, en
+  de caret-scroll die mobiel Chrome forceert blijft binnen de box i.p.v. de hele
+  pagina te laten verspringen. (Plus: scrollpositie wordt vastgehouden rond elk
+  opmaak-commando.)
 - Post-editor op mobiel: de Opslaan/Annuleren-balk blijft nu net bóven het
   toetsenbord (sticky met dynamische bottom-offset = max van toetsenbord- en

src/views/pages/post-edit.ejs

@@ -469 +469 @@
 }
 .pe-editor:focus { outline: none; }
-/* Mobiel: begrens het schrijfveld tot een box met EIGEN interne scroll. Zo blijft
-   de caret-scroll (die mobiel Chrome forceert bij een opmaak-commando) binnen de
-   box i.p.v. de hele pagina te laten verspringen. De toolbar staat er sticky boven.
-   In fullscreen vult het veld de hele pagina (regel hierboven wint via .pe-fs). */
+/* Mobiel: het FRAME is de scroll-box. De opmaak-toolbar plakt sticky aan de
+   bovenkant ervan en de tekst scrollt eronder → de toolbar blijft altijd in beeld
+   binnen de box, én de caret-scroll (die mobiel Chrome forceert) blijft binnen de
+   box i.p.v. de hele pagina te laten verspringen. Fullscreen (.pe-fs) is
+   uitgezonderd: daar scrollt het veld zelf en vult het de pagina. */
 @media (max-width: 768px) {
-  .pe-editor { min-height: 240px; max-height: 62vh; }
+  .pe-editor-frame:not(.pe-fs) { max-height: 70vh; overflow-y: auto; }
+  .pe-editor-frame:not(.pe-fs) .pe-editor { min-height: 240px; max-height: none; overflow: visible; }
 }
 .pe-editor.is-dragover {