Fix chat sliding when the iPhone keyboard opens
build-container / build (push) Successful in 4m20s

Size the shell to the visible area while a field is focused, tuck the bottom bar away, and refit the chat as the keyboard comes and goes.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-10-27 08:11:53 -04:00
1 parent 71e759e477
commit b0d60d0a5b
4 files changed
+31 -3

No files matched your search

+19
View File
@@ -68,3 +68,22 @@
else if (!e.shiftKey && (document.activeElement === last || !s.contains(document.activeElement))) { e.preventDefault(); first.focus(); }
});
})();
// ---- iPhone keyboard: iOS shrinks only the visual viewport when the keyboard opens and pans the whole page to reveal the field, so the app used to slide up with it.
// Pin the shell to what is really visible while typing and tuck the bottom bar away; chat and mail size themselves again on 'kbfit'.
(function () {
const vv = window.visualViewport; if (!vv || !matchMedia('(pointer: coarse)').matches) return;
const root = document.documentElement; let raf = 0;
const typing = () => { const a = document.activeElement; return !!a && (a.tagName === 'TEXTAREA' || a.isContentEditable || (a.tagName === 'INPUT' && !/^(checkbox|radio|button|submit|reset|range|file|color|image)$/.test(a.type))); };
function apply() {
raf = 0;
const kb = typing() && window.innerHeight - vv.height > 120 && window.innerWidth < 768;
document.body.classList.toggle('kb', kb);
if (kb) { root.style.setProperty('--vvh', vv.height + 'px'); root.style.setProperty('--vvt', vv.offsetTop + 'px'); if (window.scrollY) window.scrollTo(0, 0); }
else { root.style.removeProperty('--vvh'); root.style.removeProperty('--vvt'); }
window.dispatchEvent(new Event('kbfit'));
}
const soon = () => { if (!raf) raf = requestAnimationFrame(apply); };
vv.addEventListener('resize', soon); vv.addEventListener('scroll', soon);
document.addEventListener('focusin', soon); document.addEventListener('focusout', () => setTimeout(soon, 80));
})();