- Introduce cache busting (to circumvent aggressive caching on iOS - but ideal in other contexts as well)

- Change the build process to allow cache busting
- Optimisations to the build process
- Several improvements of UI geared towards mobile experience
-

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

@@ -434,13 +434,13 @@ export default {
 .chat-input-container {
     width: 100%;
     max-width: 1000px;
-    padding: 20px;
+    padding: 10px;
     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;
+    font-size: 16px;
     transition: opacity 0.2s ease-in-out;
     margin-left: auto;
     margin-right: auto;
@@ -470,7 +470,7 @@ export default {
     outline: none;
     transition: border-color 0.2s;
     font-family: Arial, sans-serif;
-    font-size: 14px;
+    font-size: 16px;
     /* Transparante achtergrond in plaats van wit */
     background-color: var(--human-message-background);
     color: var(--human-message-text-color);
@@ -534,14 +534,14 @@ export default {
 
 /* Active AI Message Area - positioned at top of ChatInput */
 .active-ai-message-area {
-    margin-bottom: 15px;
-    padding: 12px;
+    margin-bottom: 10px;
     background-color: var(--ai-message-background);
     color: var(--ai-message-text-color);
     border-radius: 8px;
     font-family: Arial, sans-serif;
-    font-size: 14px;
+    font-size: 16px;
     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+    padding: 5px;
 }
 
 /* Ensure the active AI message integrates well with ChatInput styling */

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

@@ -432,7 +432,7 @@ export default {
 .message-content {
     font-family: Arial, sans-serif;
     font-size: 12px;
-    max-width: 90%;
+    max-width: 100%;
     padding: 8px;
     border-radius: 10px;
     word-wrap: break-word;
@@ -663,8 +663,7 @@ export default {
 .message.bot .message-content {
     background: var(--ai-message-background);
     color: var(--ai-message-text-color);
-    border-bottom-left-radius: 4px;
-    margin-right: 60px;
+    margin-right: 20px;
 }
 
 /* Hover effects for message bubbles */
@@ -692,27 +691,18 @@ export default {
     }
     .message.ai .message-content,
     .message.bot .message-content {
-        margin-right: 40px;
+        margin-right: 5px;
     }
     /* Mobile: place logo inside bubble and prevent overlap with text */
     .message.ai .ai-message-logo {
         top: -12px;
-        left: 8px;
         width: 24px;
         height: 24px;
     }
     .message.ai .message-content {
         /* Reserve space for the in-bubble logo */
         padding-top: 1px; /* 24px logo + margins */
-        padding-left: 1px;
-    }
-}
-
-@media (max-width: 480px) {
-    .message-content {
-        max-width: 90%;
-        margin-left: 20px !important;
-        margin-right: 20px !important;
+        padding-left: 10px;
     }
 }
 

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

@@ -538,14 +538,20 @@ export default {
 <style scoped>
 /* Dynamisch formulier stijlen */
 .dynamic-form-container {
-    margin-bottom: 15px;
     overflow: hidden;
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.message .dynamic-form-container {
+    width: 100%;
+    max-width: none;
 }
 
 .dynamic-form {
     background: var(--human-message-background);
     border-radius: 8px;
-    padding: 15px;
     box-shadow: 0 2px 15px rgba(0,0,0,0.1);
     box-sizing: border-box;
     max-width: 100%;

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

@@ -294,7 +294,7 @@ export default {
         border-bottom: 2px solid #000;
     }
 }
-/* migrated from global css: message-content within form-message */
+
 .form-message .message-content {
     max-width: 90%;
     background: white;

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

@@ -80,21 +80,24 @@ const handleLanguageChange = (newLanguage) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;             /* allow wrapping to next line on narrow screens */
   padding: 10px 15px;
   background: var(--sidebar-background);
   color: var(--sidebar-color);
   border-bottom: 1px solid rgba(0,0,0,0.1);
   min-height: 60px;
+  max-width: 100%;            /* never exceed viewport width */
+  overflow: hidden;           /* clip any accidental overflow */
 }
 
 /* Mobile logo container - meer specifieke styling */
 .mobile-logo {
-  flex-shrink: 0;
+  flex-shrink: 1;             /* allow logo area to shrink */
+  min-width: 0;               /* allow shrinking below intrinsic width */
   display: flex !important;
   align-items: center;
   justify-content: flex-start;
   height: 50px; /* Vaste hoogte voor consistentie */
-  min-width: 120px; /* Minimale breedte */
 }
 
 /* Diepere styling voor het logo component */
@@ -105,6 +108,7 @@ const handleLanguageChange = (newLanguage) => {
   align-items: center !important;
   justify-content: flex-start !important;
   height: 100% !important;
+  min-width: 0 !important;    /* allow inner content to shrink */
 }
 
 .mobile-logo :deep(.logo-image) {
@@ -128,7 +132,7 @@ const handleLanguageChange = (newLanguage) => {
 /* Mobile language selector styling */
 .mobile-language-selector {
   flex-shrink: 1;
-  min-width: 140px;
+  min-width: 0;               /* allow selector area to shrink */
 }
 
 .mobile-language-selector :deep(.language-selector) {
@@ -142,10 +146,18 @@ const handleLanguageChange = (newLanguage) => {
 .mobile-language-selector :deep(.language-select) {
   padding: 6px 10px;
   font-size: 0.85rem;
-  min-width: 120px;
+  min-width: 0;               /* allow the select to shrink */
+  max-width: 100%;            /* never exceed container width */
   margin: 0;
 }
 
+/* Extra constraints on ultra-small screens */
+@media (max-width: 360px) {
+  .mobile-language-selector :deep(.language-select) {
+    max-width: 60vw;          /* avoid pushing beyond viewport */
+  }
+}
+
 /* Media queries voor responsiviteit */
 @media (max-width: 768px) {
   .mobile-header {