- TRA-77 - Scroll behaviour in the Message History adapted to support both scrolling by the end user, and ensuring the last message is shown when new messages are added, or resizing is done.

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

@@ -549,20 +549,40 @@ export default {
 </script>
 
 <style scoped>
+
 .chat-app-container {
     display: flex;
     flex-direction: column;
     height: 100vh;
     width: 100%;
+    min-height: 0;
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 20px;
+    box-sizing: border-box;
 }
 
 .chat-messages-area {
     flex: 1;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px; /* Ruimte tussen messages en input */
+    border-radius: 15px;
+    background: var(--history-background);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto; /* Horizontaal centreren */
+    align-self: center; /* Extra centrering in flexbox context */
 }
 
 .chat-input-area {
     flex-shrink: 0;
+    flex: 0 0 auto;
 }
 
 /* Responsive adjustments */