fix(app): keyboard resizes container, tab bar margin, HTTPS for PWA install

- Root container height now bound to visualViewport.height when keyboard
  is open — the whole layout shrinks instead of being pushed offscreen
- Tab bar gets 24px vertical margin (12px top + 12px bottom + safe area)
- Added @vitejs/plugin-basic-ssl for HTTPS dev server — required for PWA
  install on non-localhost origins (LAN IP access)
- Improved useVisualViewport to track fullHeight for accurate keyboard
  offset calculation across orientation changes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/app/src/composables/useVisualViewport.ts

@@ -4,28 +4,46 @@ import { ref, onMounted, onUnmounted } from 'vue'
  * Tracks the visual viewport to detect mobile keyboard open/close.
  * Uses the VisualViewport API to compute keyboard height as the difference
  * between window.innerHeight and visualViewport.height.
+ *
+ * When the keyboard opens, viewportHeight shrinks to the visible area above
+ * the keyboard. Bind your container's height to viewportHeight to make the
+ * layout resize instead of the browser pushing content offscreen.
  */
 export function useVisualViewport() {
   const keyboardHeight = ref(0)
   const isKeyboardOpen = ref(false)
   const viewportHeight = ref(typeof window !== 'undefined' ? window.innerHeight : 0)
 
+  // Store the initial full height so we can compute keyboard offset
+  let fullHeight = typeof window !== 'undefined' ? window.innerHeight : 0
+
   function onViewportChange() {
     const vv = window.visualViewport
     if (!vv) return
-    const kbHeight = Math.max(0, window.innerHeight - vv.height)
+    const kbHeight = Math.max(0, fullHeight - vv.height)
     keyboardHeight.value = kbHeight
     isKeyboardOpen.value = kbHeight > 100
     viewportHeight.value = vv.height
   }
 
+  function onWindowResize() {
+    // Update full height when orientation changes or browser chrome resizes
+    const vv = window.visualViewport
+    if (vv && !isKeyboardOpen.value) {
+      fullHeight = vv.height
+      viewportHeight.value = vv.height
+    }
+  }
+
   onMounted(() => {
     const vv = window.visualViewport
     if (vv) {
+      fullHeight = vv.height
+      viewportHeight.value = vv.height
       vv.addEventListener('resize', onViewportChange)
       vv.addEventListener('scroll', onViewportChange)
-      onViewportChange()
     }
+    window.addEventListener('resize', onWindowResize)
   })
 
   onUnmounted(() => {
@@ -34,6 +52,7 @@ export function useVisualViewport() {
       vv.removeEventListener('resize', onViewportChange)
       vv.removeEventListener('scroll', onViewportChange)
     }
+    window.removeEventListener('resize', onWindowResize)
   })
 
   return { keyboardHeight, isKeyboardOpen, viewportHeight }