Changeset f3f43df in Klonkt for src/views/shell.ejs

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@…>

File:

• src/views/shell.ejs (modified) (1 diff)

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>