- Small changes to allow for keyboard input, not finished

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

@@ -1,7 +1,7 @@
 active_text_color<template>
     <div class="chat-app-container">
         <!-- Desktop layout: huidige gedrag behouden -->
-        <div v-if="!isMobile" class="chat-desktop-layout">
+        <div v-if="!isMobileFallback" class="chat-desktop-layout">
             <message-history
                 :messages="displayMessages"
                 :is-typing="isTyping"
@@ -137,7 +137,6 @@ import { createLanguageProvider, LANGUAGE_PROVIDER_KEY } from '../js/services/La
 // Import content modal composable
 import { provideContentModal } from '../js/composables/useContentModal.js';
 import { provide } from 'vue';
-import useChatViewport from '../js/composables/useChatViewport.js';
 
 export default {
     name: 'ChatApp',
@@ -166,16 +165,12 @@ export default {
         // Creëer en provide content modal
         const contentModal = provideContentModal();
 
-        // Initialiseer viewport-/device-informatie via useChatViewport (VueUse)
-        const { isMobile } = useChatViewport();
-
         // Provide aan alle child components
         provide(LANGUAGE_PROVIDER_KEY, languageProvider);
         
         return {
             languageProvider,
-            contentModal,
-            isMobile
+            contentModal
         };
     },
 
@@ -706,8 +701,13 @@ export default {
 .chat-mobile-layout {
     display: flex;
     flex-direction: column;
+    /* Binnen SafeViewport vertrouwen we op de hoogte van de bovenliggende
+       containers (html/body/app-container). Deze layout moet zich daaraan
+       aanpassen en niet opnieuw zelf een safe-vh berekening doen, om
+       dubbele afrondingsfouten en extra scrollruimte te vermijden. */
+    flex: 1 1 auto;
     height: 100%;
-    min-height: calc(var(--safe-vh, 1vh) * 100);
+    min-height: 0;
 }
 
 .chat-mobile-content {
@@ -761,6 +761,14 @@ export default {
     padding-bottom: calc(6px + var(--safe-bottom-inset, 0px));
 }
 
+/* Wanneer het toetsenbord open is (gedetecteerd door useChatViewport via
+   de body-klasse chat-keyboard-open), willen we geen extra grote
+   safe-bottom-inset meer onder de input. Dan sluiten we zo veel mogelijk
+   aan tegen de visuele viewport en houden we alleen een kleine vaste marge. */
+body.chat-keyboard-open .tab-chat-input {
+    padding-bottom: 6px;
+}
+
 @media (max-width: 768px) {
     .chat-app-container {
         /* Minder padding op mobiel zodat de tabbar binnen de viewport valt */

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

@@ -24,5 +24,8 @@ useChatViewport();
   height: 100%;
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
 }
 </style>