Changeset f3f43df in Klonkt

Timestamp:

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

Author:

roboburr <roboburr@…>

Branches:

main

Children:

e22230e

Parents:

c01f471

Message:

ui: text fields grow with content instead of scrolling internally (no scroll-in-scroll)

• Global textarea auto-resize in shell.ejs (grows with content, no internal scrollbar; also after htmx swaps).
• Post editor: inline scroll box removed → the writing field grows with the content. Typing on mobile/tablet always goes fullscreen anyway (only scroll = the page).

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

Files:

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

CHANGELOG.md

@@ -42 +42 @@
 
 ### Toegevoegd
+- Tekstvelden (`<textarea>`) groeien nu site-breed mee met de inhoud i.p.v. intern
+  te scrollen (scroll-binnen-scroll was verwarrend). Het inline schrijfveld groeit
+  ook gewoon mee; typen op mobiel/tablet gaat sowieso fullscreen.
 - Op **mobiel & tablet** (touch) gebeurt typen voortaan **altijd in volledig scherm**:
   zodra je in het schrijfveld tikt, gaat de editor automatisch fullscreen. Eruit met

src/views/pages/post-edit.ejs

@@ -469 +469 @@
 }
 .pe-editor:focus { outline: none; }
-/* 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-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; }
-}
+/* Inline (niet-fullscreen) groeit het schrijfveld gewoon mee met de inhoud — geen
+   interne scroll-box (scroll-binnen-scroll is verwarrend). Op mobiel/tablet gaat
+   typen sowieso fullscreen (zie JS), waar het veld de pagina vult en als enige
+   scrollt. */
+.pe-editor-frame:not(.pe-fs) .pe-editor { overflow: visible; }
 .pe-editor.is-dragover {
   outline: 2px dashed var(--accent);

src/views/shell.ejs

@@ -552 +552 @@
 </script>
 
+<!-- Auto-resize: elk <textarea> groeit mee met de inhoud i.p.v. intern te scrollen
+     (scroll-binnen-scroll is verwarrend). Site-breed; ook na htmx-swaps. -->
+<script>
+(function () {
+  function autoSize(ta) {
+    if (!ta || ta.tagName !== 'TEXTAREA') return;
+    ta.style.overflowY = 'hidden';
+    ta.style.height = 'auto';
+    ta.style.height = ta.scrollHeight + 'px';
+  }
+  function sizeAll(root) {
+    (root || document).querySelectorAll('textarea').forEach(autoSize);
+  }
+  document.addEventListener('input', function (e) { autoSize(e.target); });
+  document.addEventListener('focusin', function (e) { autoSize(e.target); });
+  // Init + opnieuw na htmx-navigatie/partials.
+  sizeAll();
+  document.body.addEventListener('htmx:afterSettle', function () { sizeAll(); });
+  window.addEventListener('load', function () { sizeAll(); });
+})();
+</script>
+
 <!-- PWA install prompt — show button when browser fires beforeinstallprompt -->
 <script>