From 2f26bf999c88a81149aa0a7f5d889548616a3a86 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 20 Feb 2026 13:24:31 -0600
Subject: [PATCH] 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.
---
 .../components/FloatingTranscriptDebug.vue    | 39 +++----------------
 1 file changed, 5 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/FloatingTranscriptDebug.vue b/frontend/src/components/FloatingTranscriptDebug.vue
index 7d39d76..90f9751 100644
--- a/frontend/src/components/FloatingTranscriptDebug.vue
+++ b/frontend/src/components/FloatingTranscriptDebug.vue
@@ -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,25 +298,12 @@ 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`
-      }
+    style.bottom = '0'
+    if (isFullScreen) {
+      style.top = `${headerH}px`
+      style.height = 'auto'
     } else {
-      // No keyboard
-      style.bottom = '0'
-      if (isFullScreen) {
-        style.top = `${headerH}px`
-        style.height = 'auto'
-      } else {
-        style.height = `${sheetHeight.value}dvh`
-      }
+      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>