- Small changes to allow for keyboard input, not finished

eveai_chat_client/static/assets/css/chat.css

@@ -21,7 +21,9 @@
 /* App container layout */
 .app-container {
     display: flex;
-    /* Use visual viewport variable when available */
+    /* Op desktop gebruiken we de veilige viewporthoogte direct; op mobiel
+       laten we html/body de hoogte bepalen en neemt de app-container
+       eenvoudig 100% daarvan in via de media query verderop. */
     min-height: 0;
     height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
     width: 100%;
@@ -93,7 +95,7 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
-    height: auto; /* prefer dynamic viewport on desktop */
+    height: auto; /* desktop: dynamische hoogte, op mobiel overschreven */
 }
 
 .chat-container {
@@ -103,6 +105,26 @@
     min-height: 0;        /* laat kinderen (ChatApp) krimpen */
 }
 
+/* Op mobiel sluiten we de volledige content-kolom strak aan op de veilige
+   viewporthoogte zodat alleen de chatcontent zelf kan scrollen en niet de
+   gehele pagina wanneer het toetsenbord opent. */
+@media (max-width: 768px) {
+    .app-container {
+        height: 100%;
+    }
+
+    .content-area {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .chat-container {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: hidden;
+    }
+}
+
 html, body {
     height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
     min-height: 0;

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>