- Mobile client changes.

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

@@ -497,6 +497,17 @@ export default {
     font-weight: bold;
 }
 
+/* Verberg character counter op mobile */
+@media (max-width: 768px) {
+    .character-counter {
+        display: none;
+    }
+    
+    .message-input {
+        padding-right: 15px; /* Verminder van 60px naar 15px omdat counter weg is */
+    }
+}
+
 /* Input actions */
 .input-actions {
     display: flex;

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

@@ -1,12 +1,11 @@
-<!-- MobileHeader.vue -->
 <template>
   <div class="mobile-header">
-    <SideBarLogo 
+    <SideBarLogo
       :logo-url="tenantMake.logo_url"
       :make-name="tenantMake.name"
       class="mobile-logo"
     />
-    
+
     <LanguageSelector
       :initial-language="initialLanguage"
       :current-language="currentLanguage"
@@ -56,21 +55,21 @@ const currentLanguage = ref(props.initialLanguage);
 
 const handleLanguageChange = (newLanguage) => {
   currentLanguage.value = newLanguage;
-  
+
   // Emit to parent
   emit('language-changed', newLanguage);
-  
+
   // Global event for backward compatibility
   const globalEvent = new CustomEvent('language-changed', {
     detail: { language: newLanguage }
   });
   document.dispatchEvent(globalEvent);
-  
+
   // Update chatConfig
   if (window.chatConfig) {
     window.chatConfig.language = newLanguage;
   }
-  
+
   // Save preference
   localStorage.setItem('preferredLanguage', newLanguage);
 };
@@ -88,56 +87,72 @@ const handleLanguageChange = (newLanguage) => {
   min-height: 60px;
 }
 
-/* Mobile logo styling - compact version */
-.mobile-header :deep(.mobile-logo) {
+/* Mobile logo container - meer specifieke styling */
+.mobile-logo {
   flex-shrink: 0;
+  display: flex !important;
+  align-items: center;
+  justify-content: flex-start;
+  height: 50px; /* Vaste hoogte voor consistentie */
+  min-width: 120px; /* Minimale breedte */
 }
 
-.mobile-header :deep(.mobile-logo .sidebar-logo) {
-  padding: 0;
-  margin-right: 15px;
+/* Diepere styling voor het logo component */
+.mobile-logo :deep(.sidebar-logo) {
+  padding: 0 !important;
+  margin: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  height: 100% !important;
 }
 
-.mobile-header :deep(.mobile-logo .logo-image) {
-  max-height: 40px;
-  max-width: 120px;
+.mobile-logo :deep(.logo-image) {
+  max-height: 40px !important;
+  max-width: 120px !important;
+  height: auto !important;
+  width: auto !important;
+  object-fit: contain !important;
+  display: block !important;
 }
 
-.mobile-header :deep(.mobile-logo .logo-placeholder) {
-  width: 40px;
-  height: 40px;
-  font-size: 1rem;
+.mobile-logo :deep(.logo-placeholder) {
+  width: 40px !important;
+  height: 40px !important;
+  font-size: 1rem !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
 }
 
-/* Mobile language selector styling - compact horizontal version */
-.mobile-header :deep(.mobile-language-selector) {
-  flex-shrink: 0;
+/* Mobile language selector styling */
+.mobile-language-selector {
+  flex-shrink: 1;
   min-width: 140px;
 }
 
-.mobile-header :deep(.mobile-language-selector .language-selector) {
+.mobile-language-selector :deep(.language-selector) {
   margin: 0;
 }
 
-.mobile-header :deep(.mobile-language-selector label) {
+.mobile-language-selector :deep(label) {
   display: none; /* Hide label in mobile header */
 }
 
-.mobile-header :deep(.mobile-language-selector .language-select) {
+.mobile-language-selector :deep(.language-select) {
   padding: 6px 10px;
   font-size: 0.85rem;
   min-width: 120px;
   margin: 0;
 }
 
-/* Show mobile header on mobile */
+/* Media queries voor responsiviteit */
 @media (max-width: 768px) {
   .mobile-header {
     display: flex;
   }
 }
 
-/* Hide mobile header on desktop */
 @media (min-width: 769px) {
   .mobile-header {
     display: none;