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:
@@ -193,18 +193,6 @@ function cycleSizeMode() {
|
||||
const isMobile = ref(false)
|
||||
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
|
||||
// ============================================================================
|
||||
@@ -310,18 +298,6 @@ const windowStyle = computed((): Record<string, string> => {
|
||||
width: '100%',
|
||||
}
|
||||
|
||||
if (keyboardVisible.value) {
|
||||
// Body is position:fixed so no browser auto-scroll — simple offset works
|
||||
style.bottom = `${keyboardHeight.value}px`
|
||||
const available = window.innerHeight - keyboardHeight.value - headerH
|
||||
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 {
|
||||
// No keyboard
|
||||
style.bottom = '0'
|
||||
if (isFullScreen) {
|
||||
style.top = `${headerH}px`
|
||||
@@ -329,7 +305,6 @@ const windowStyle = computed((): Record<string, string> => {
|
||||
} else {
|
||||
style.height = `${sheetHeight.value}dvh`
|
||||
}
|
||||
}
|
||||
return style
|
||||
}
|
||||
|
||||
@@ -479,9 +454,6 @@ onMounted(async () => {
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
document.addEventListener('keydown', handleZoomKey)
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', onVisualViewportResize)
|
||||
}
|
||||
oceanLifeTimer = setInterval(tickOceanLife, 20000)
|
||||
tickOceanLife()
|
||||
await voice.init()
|
||||
@@ -497,7 +469,6 @@ onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousemove', onResize)
|
||||
document.removeEventListener('mouseup', stopResize)
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
window.visualViewport?.removeEventListener('resize', onVisualViewportResize)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user