- Wrap client in @vueuse/core to abstract mobile client dimensions

eveai_chat_client/static/assets/vue-components/ChatRoot.vue

@@ -0,0 +1,13 @@
+<template>
+  <SafeViewport>
+    <ChatApp />
+  </SafeViewport>
+</template>
+
+<script setup>
+// ChatRoot.vue
+// Kleine root-component die de ChatApp binnen de SafeViewport wrapper rendert.
+
+import ChatApp from './ChatApp.vue';
+import SafeViewport from './SafeViewport.vue';
+</script>

eveai_chat_client/static/assets/vue-components/SafeViewport.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="safe-viewport-wrapper">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// SafeViewport.vue
+// Wrapper-component die de chatapplicatie omhult en de viewport-/keyboard-logica
+// initialiseert via de useChatViewport composable.
+
+// Belangrijk: de composable zelf leeft onder nginx/frontend_src/js zodat hij
+// binnen dezelfde npm-package valt als de bundel (en zo @vueuse/core kan resolven).
+// Daarom gebruiken we hier een relatieve pad vanuit de Vue-component naar die map.
+
+import useChatViewport from '../js/composables/useChatViewport.js';
+
+// Initialiseer de viewport-logica zodra deze wrapper instantiëert.
+useChatViewport();
+</script>
+
+<style scoped>
+.safe-viewport-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>