diff --git a/eveai_chat_client/static/assets/css/chat-components.css b/eveai_chat_client/static/assets/css/chat-components.css index c52711c..db868c8 100644 --- a/eveai_chat_client/static/assets/css/chat-components.css +++ b/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 */ diff --git a/eveai_chat_client/static/assets/css/chat-input.css b/eveai_chat_client/static/assets/css/chat-input.css index 6991d08..2854f7e 100644 --- a/eveai_chat_client/static/assets/css/chat-input.css +++ b/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; -} diff --git a/eveai_chat_client/static/assets/vue-components/ChatInput.vue b/eveai_chat_client/static/assets/vue-components/ChatInput.vue index e289595..28138c7 100644 --- a/eveai_chat_client/static/assets/vue-components/ChatInput.vue +++ b/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 */ diff --git a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue b/eveai_chat_client/static/assets/vue-components/MessageHistory.vue index 7819fe4..6ee1e20 100644 --- a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue +++ b/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; }