Changeset 9ef3c56 in Klonkt for src/views

Timestamp:

06/19/2026 11:50:23 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

4ad669a

Parents:

a0bff44

Message:

fix(mobile): hide fixed bottom bars when the keyboard is open

Site-wide: body.kb-open (set via visualViewport when the keyboard opens +
an input field has focus) hides the bottom tab + mini player, so they no
longer float over or overlap input fields while typing. style.css?v=12.

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

File:

• src/views/shell.ejs (modified) (2 diffs)

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=11">
+<link rel="stylesheet" href="/assets/css/style.css?v=12">
 
 <!-- Audio player styles: loaded on every page so the mini-player works
@@ -528 +528 @@
 </script>
 
+<!-- Mobiel toetsenbord vs. site-layout: zet body.kb-open zodra het toetsenbord
+     open is (visual viewport fors korter dan het venster) ÉN er een invoerveld
+     focus heeft. CSS verbergt dan de vaste onderbalken (bottom-tab + mini-speler)
+     zodat ze niet over het invoerveld zweven. -->
+<script>
+(function () {
+  var vv = window.visualViewport;
+  if (!vv) return;
+  function isField(el) {
+    if (!el) return false;
+    var t = el.tagName;
+    return t === 'INPUT' || t === 'TEXTAREA' || el.isContentEditable;
+  }
+  function update() {
+    var open = (window.innerHeight - vv.height) > 150 && isField(document.activeElement);
+    document.body.classList.toggle('kb-open', open);
+  }
+  vv.addEventListener('resize', update);
+  vv.addEventListener('scroll', update);
+  document.addEventListener('focusin', function () { setTimeout(update, 60); });
+  document.addEventListener('focusout', function () { setTimeout(update, 60); });
+})();
+</script>
+
 <!-- PWA install prompt — show button when browser fires beforeinstallprompt -->
 <script>