Changeset 859bace0 in Klonkt

Timestamp:

06/19/2026 12:20:35 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

7d81265

Parents:

2d596cf

Message:

fix(editor): mobile writing field as bounded box with internal scroll

The field grew with the text → the whole page scrolled to the caret on a
formatting command. On mobile now min-height 240 / max-height 62vh +
overflow auto: caret scroll stays within the box, the page does not jump,
and the toolbar sits sticky above it. Fullscreen resets max-height to none
(fills the page).

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

Files:

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

CHANGELOG.md

@@ -16 +16 @@
 ### Opgelost
 - Editor: het beeld verspringt niet meer bij het aanklikken van een opmaakknop.
-  `execCommand` scrollde de caret in beeld; de scrollpositie wordt nu vastgehouden
-  rond elk opmaak-commando, zodat je zelf scrollt.
+  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.)
 - 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

@@ -446 +446 @@
   background: var(--paper);
 }
-/* In fullscreen vult het schrijfveld de resterende ruimte en scrollt het zelf. */
+/* In fullscreen vult het schrijfveld de resterende ruimte en scrollt het zelf
+   (max-height: none overschrijft de mobiele box-begrenzing hieronder). */
 .pe-editor-frame.pe-fs .pe-editor {
-  flex: 1 1 auto; min-height: 0; height: auto;
+  flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
 }
 body.pe-fs-open { overflow: hidden; }
@@ -468 +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). */
+@media (max-width: 768px) {
+  .pe-editor { min-height: 240px; max-height: 62vh; }
+}
 .pe-editor.is-dragover {
   outline: 2px dashed var(--accent);