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/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-dvh flex flex-col" :class="currentTheme">
+  <div class="h-dvh flex flex-col" :class="currentTheme" :style="rootStyle">
     <RouterView />
     <ArticleOverlay />
     <PlayerBar v-if="!isMobile" />
@@ -17,6 +17,7 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { RouterView } from 'vue-router'
 import { useTheme } from '@/composables/useTheme'
 import { useArchy } from '@/composables/useArchy'
+import { useVisualViewport } from '@/composables/useVisualViewport'
 import ArticleOverlay from '@/components/content/ArticleOverlay.vue'
 import PlayerBar from '@/components/player/PlayerBar.vue'
 import PassphraseDialog from '@/components/ui/PassphraseDialog.vue'
@@ -32,8 +33,18 @@ const archy = useArchy()
 
 const windowWidth = ref(window.innerWidth)
 const isMobile = computed(() => windowWidth.value < 1024)
+const { viewportHeight, isKeyboardOpen } = useVisualViewport()
 function onResize() { windowWidth.value = window.innerWidth }
 
+// On mobile, bind height to visualViewport.height so the container
+// actually shrinks when the keyboard opens (dvh doesn't do this reliably)
+const rootStyle = computed(() => {
+  if (isMobile.value && isKeyboardOpen.value) {
+    return { height: `${viewportHeight.value}px` }
+  }
+  return {}
+})
+
 const showPassphrase = ref(false)
 const isCreatingPassphrase = ref(false)