Changeset 06f3791 in Klonkt

Timestamp:

06/19/2026 11:42:39 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

a0bff44

Parents:

d2078f4

Message:

fix(editor): toolbar stays in view in fullscreen on mobile (visual viewport)

When the mobile keyboard opened, the position:fixed fullscreen frame
(attached to the layout viewport) slid up → toolbar off screen. The
frame now follows the visualViewport (top + height) while fullscreen is
active, so the formatting toolbar always remains visible above the
keyboard.

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

Files:

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

CHANGELOG.md

@@ -25 +25 @@
 ### Toegevoegd
 - Schrijfvenster kan op **volledig scherm** (knop in de editor-toolbar, of Escape om
-  terug te gaan) — fijn voor afleidingsvrij schrijven op mobiel.
+  terug te gaan) — fijn voor afleidingsvrij schrijven op mobiel. De opmaak-toolbar
+  blijft daarbij altijd bovenaan in beeld, ook als het mobiele toetsenbord opent
+  (frame volgt de visual viewport).
 - Beheerder kan z'n **Google-account koppelen** (Account → Inloggen met Google) en
   daarna óók met Google inloggen. Veilig: koppelen kan alleen terwijl je met

src/views/pages/post-edit.ejs

@@ -1160 +1160 @@
   const fsBtn = document.getElementById('pe-fullscreen-btn');
   const editorFrame = document.querySelector('.pe-editor-frame');
+
+  // Op mobiel duwt het toetsenbord de zichtbare (visual) viewport omhoog terwijl
+  // een position:fixed-frame aan de LAYOUT-viewport blijft hangen → de toolbar
+  // schuift uit beeld. Houd het fullscreen-frame daarom gelijk aan de visual
+  // viewport (top + hoogte), zodat de toolbar altijd bovenaan zichtbaar blijft.
+  function syncFsViewport() {
+    if (!editorFrame || !editorFrame.classList.contains('pe-fs')) return;
+    const vv = window.visualViewport;
+    if (!vv) return;
+    editorFrame.style.top = vv.offsetTop + 'px';
+    editorFrame.style.height = vv.height + 'px';
+  }
+  function clearFsViewport() {
+    if (!editorFrame) return;
+    editorFrame.style.top = '';
+    editorFrame.style.height = '';
+  }
   function toggleFullscreen() {
     if (!editorFrame) return;
@@ -1167 +1184 @@
       fsBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
       fsBtn.title = on ? 'Verklein' : 'Volledig scherm';
+    }
+    if (window.visualViewport) {
+      if (on) {
+        window.visualViewport.addEventListener('resize', syncFsViewport);
+        window.visualViewport.addEventListener('scroll', syncFsViewport);
+        syncFsViewport();
+      } else {
+        window.visualViewport.removeEventListener('resize', syncFsViewport);
+        window.visualViewport.removeEventListener('scroll', syncFsViewport);
+        clearFsViewport();
+      }
     }
     if (on) editor.focus({ preventScroll: true });