- Correctie van de ActiveChatInput container (werd nu te groot getoond).

eveai_chat_client/static/assets/css/chat-components.css

@@ -56,20 +56,6 @@
     align-self: center; /* Extra centrering in flexbox context */
 }
 
-/* Zorg dat de MessageHistory container ook flexbox gebruikt */
-.message-history-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    padding: 20px; /* Interne padding voor MessageHistory */
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 1000px; /* Optimale breedte */
-    margin-left: auto;
-    margin-right: auto; /* Horizontaal centreren */
-}
-
 .chat-messages {
     flex: 1;
     overflow-y: auto;
@@ -145,11 +131,6 @@
         max-width: 100%; /* Op mobiel volledige breedte gebruiken */
     }
 
-    .message-history-container {
-        padding: 15px;
-        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
-    }
-
     .chat-input {
         padding: 15px;
         gap: 10px;
@@ -176,9 +157,6 @@
         margin-bottom: 12px;
     }
 
-    .message-history-container {
-        padding: 12px;
-    }
 }
 
 /* Loading states */

eveai_chat_client/static/assets/css/chat-input.css

@@ -77,8 +77,4 @@
     opacity: 1;
 }
 
-/* Smooth transitions for mode switching */
-.chat-input-container > * {
-    transition: opacity 0.2s ease-in-out;
-}
 

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

@@ -435,12 +435,17 @@ export default {
 /* Algemene container */
 .chat-input-container {
     width: 100%;
+    max-width: 1000px;
     padding: 20px;
+    box-sizing: border-box;
     background-color: var(--active-background-color);
     color: var(--human-message-text-color);
     border-top: 1px solid #e0e0e0;
     font-family: Arial, sans-serif;
     font-size: 14px;
+    transition: opacity 0.2s ease-in-out;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 /* Input veld en knoppen */

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

@@ -277,6 +277,13 @@ export default {
     display: flex;
     flex-direction: column;
     height: 100%;
+    min-height: 0;
+    padding: 20px; /* Interne padding voor MessageHistory */
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto; /* Horizontaal centreren */
     overflow: hidden;
 }