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

+3 -2
View File
@@ -345,10 +345,11 @@ async function chAnnounceCard(el) {
function chFit() {
const m = chMounted() && ch.root.querySelector('.sgm'); if (!m || m.offsetParent === null) return;
if (window.innerWidth >= 1024) { m.style.height = ''; return; }
let bottom = window.visualViewport ? window.visualViewport.height : window.innerHeight;
let bottom = window.visualViewport ? window.visualViewport.offsetTop + window.visualViewport.height : window.innerHeight; // (page coordinates: the visible area can be panned down while the keyboard is up)
const top0 = m.getBoundingClientRect().top; // (look up from the screen's edge for the first spot that is page content, not the bottom bar or mini player)
for (let y = Math.floor(bottom) - 2; y > top0 + 130; y -= 4) { const hit = document.elementsFromPoint(innerWidth / 2, y).find(e => !e.closest('.sgm')); const covers = hit && !hit.closest('#view'); if (!covers) { bottom = y + 4; break; } }
const top = m.getBoundingClientRect().top; m.style.height = Math.max(260, Math.floor(bottom - top - 10)) + 'px';
const top = m.getBoundingClientRect().top; m.style.height = Math.max(document.body.classList.contains('kb') ? 150 : 260, Math.floor(bottom - top - 10)) + 'px';
}
window.addEventListener('kbfit', () => { chFit(); if (!chMounted() || !chq('.sgm')) return; const v = document.getElementById('view'); if (v) v.scrollTop = 0; const l = chq('#chmsgs'); if (l && document.activeElement && document.activeElement.id === 'chtext') l.scrollTop = l.scrollHeight; }); // (the keyboard came or went: refit, and keep the newest message in sight)
window.addEventListener('resize', chFit); if (window.visualViewport) window.visualViewport.addEventListener('resize', chFit);
setInterval(chFit, 700);