- Ensure long messages do not take all available space, rendering the UI unusable. We now have limits built in in the chat-input as well as in the message history.

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

@@ -2,7 +2,7 @@
     <div :class="getMessageClass()" :data-message-id="message.id">
         <!-- Normal text messages -->
         <template v-if="message.type === 'text'">
-            <div class="message-content" style="width: 100%;">
+            <div class="message-content" style="width: 100%;" ref="messageContent">
                 <!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
                 <img 
                     v-if="message.sender === 'ai'" 
@@ -120,7 +120,7 @@
 
         <!-- Other message types -->
         <template v-else>
-            <div class="message-content">
+            <div class="message-content" ref="messageContent">
                 <!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
                 <img 
                     v-if="message.sender === 'ai'" 
@@ -225,12 +225,35 @@ export default {
         }
     },
     mounted() {
-        // Component initialization if needed
+        // Reset initial scroll position to top for the inner bubble
+        this.$nextTick(() => {
+            const el = this.$refs.messageContent;
+            if (el && typeof el.scrollTop !== 'undefined') {
+                el.scrollTop = 0;
+            }
+        });
     },
-    beforeUnmount() {
+    watch: {
+            isActiveContext(newVal, oldVal) {
+                // When moving from active (input/sticky) to history, reset scroll to top
+                if (oldVal === true && newVal === false) {
+                    this.$nextTick(() => {
+                        const el = this.$refs.messageContent;
+                        if (el && typeof el.scrollTop !== 'undefined') {
+                            el.scrollTop = 0;
+                        }
+                    });
+                }
+            }
+        },
+        beforeUnmount() {
         // Component cleanup if needed
     },
     computed: {
+            isActiveContext() {
+                // active if in input area or sticky area
+                return !!(this.isInInputArea || this.isInStickyArea);
+            },
         hasFormData() {
             return this.message.formData && 
                   ((Array.isArray(this.message.formData.fields) && this.message.formData.fields.length > 0) ||
@@ -696,4 +719,27 @@ export default {
         margin-right: 20px !important;
     }
 }
+
+/* Mobile bubble height constraints and inner scroll containment */
+@media (max-width: 768px) {
+    /* Default/history: apply to all message bubbles */
+    .message .message-content {
+        max-height: 33vh; /* fallback */
+        overflow-y: auto;
+        overscroll-behavior: contain; /* prevent scroll chaining to parent */
+        -webkit-overflow-scrolling: touch; /* iOS smooth inertia */
+    }
+    /* Active contexts (input area or sticky area): allow up to half viewport */
+    .message.input-area .message-content,
+    .message.sticky-area .message-content {
+        max-height: 50vh; /* fallback */
+    }
+}
+@supports (max-height: 1svh) {
+    @media (max-width: 768px) {
+        .message .message-content { max-height: 33svh; }
+        .message.input-area .message-content,
+        .message.sticky-area .message-content { max-height: 50svh; }
+    }
+}
 </style>