refactor: remove manual keyboard detection from FloatingTranscriptDebug

Rely on dvh units for dynamic viewport sizing instead of manual
visualViewport keyboard detection. Removes jank-prone resize listener
and simplifies mobile sheet positioning.
This commit is contained in:
2026-02-20 13:24:31 -06:00
parent 894d5213c7
commit 2f26bf999c

View File

@@ -193,18 +193,6 @@ function cycleSizeMode() {
const isMobile = ref(false) const isMobile = ref(false)
const sheetHeight = ref(55) const sheetHeight = ref(55)
// Virtual keyboard detection
const keyboardVisible = ref(false)
const keyboardHeight = ref(0)
function onVisualViewportResize() {
if (!window.visualViewport) return
const vv = window.visualViewport
const kbH = window.innerHeight - (vv.offsetTop + vv.height)
keyboardHeight.value = Math.max(0, kbH)
keyboardVisible.value = kbH > 100
}
// ============================================================================ // ============================================================================
// MOBILE DETECTION // MOBILE DETECTION
// ============================================================================ // ============================================================================
@@ -310,25 +298,12 @@ const windowStyle = computed((): Record<string, string> => {
width: '100%', width: '100%',
} }
if (keyboardVisible.value) { style.bottom = '0'
// Body is position:fixed so no browser auto-scroll — simple offset works if (isFullScreen) {
style.bottom = `${keyboardHeight.value}px` style.top = `${headerH}px`
const available = window.innerHeight - keyboardHeight.value - headerH style.height = 'auto'
if (isFullScreen) {
style.height = `${Math.max(0, available)}px`
} else {
const originalH = window.innerHeight * sheetHeight.value / 100
style.height = `${Math.max(0, Math.min(originalH, available))}px`
}
} else { } else {
// No keyboard style.height = `${sheetHeight.value}dvh`
style.bottom = '0'
if (isFullScreen) {
style.top = `${headerH}px`
style.height = 'auto'
} else {
style.height = `${sheetHeight.value}dvh`
}
} }
return style return style
} }
@@ -479,9 +454,6 @@ onMounted(async () => {
checkMobile() checkMobile()
window.addEventListener('resize', checkMobile) window.addEventListener('resize', checkMobile)
document.addEventListener('keydown', handleZoomKey) document.addEventListener('keydown', handleZoomKey)
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', onVisualViewportResize)
}
oceanLifeTimer = setInterval(tickOceanLife, 20000) oceanLifeTimer = setInterval(tickOceanLife, 20000)
tickOceanLife() tickOceanLife()
await voice.init() await voice.init()
@@ -497,7 +469,6 @@ onBeforeUnmount(() => {
document.removeEventListener('mousemove', onResize) document.removeEventListener('mousemove', onResize)
document.removeEventListener('mouseup', stopResize) document.removeEventListener('mouseup', stopResize)
window.removeEventListener('resize', checkMobile) window.removeEventListener('resize', checkMobile)
window.visualViewport?.removeEventListener('resize', onVisualViewportResize)
}) })
</script> </script>