- Adaptation of the form message layout, in such a way that labels are shown on top of their values iso left, allowing a decent rendering on mobile devices

- refactoring message-content CSS

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

@@ -155,18 +155,7 @@
 }
 
 /* Zorg dat de progress tracker goed wordt weergegeven in een lege message bubble */
-.message-content:has(.message-text:empty) .message-progress {
+/* moved to ChatMessage.vue scoped styles */
-    margin-bottom: 0;
-}
-
-/* Verberg de message content container als er geen inhoud is en de verwerking bezig is */
-.message-content:has(.message-text:empty):not(:has(.message-progress.completed)):not(:has(.message-progress.error)) {
-    background: transparent;
-    box-shadow: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-}
 
 /* Focus binnen ChatInput voor toegankelijkheid */
 .chat-input:focus-within {
@@ -208,33 +197,7 @@
     justify-content: flex-start;
 }
 
-/* Message content wrapper - dit wordt de bubble */
+/* moved to ChatMessage.vue scoped styles */
-.message-content {
-    max-width: 70%;
-    padding: 12px 16px;
-    border-radius: 18px;
-    word-wrap: break-word;
-    position: relative;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    transition: all 0.2s ease;
-    display: inline-block;
-}
-
-/* User message bubble styling */
-.message.user .message-content {
-    background: var(--human-message-background);
-    color: var(--human-message-text-color);
-    border-bottom-right-radius: 4px;
-}
-
-/* AI/Bot message bubble styling */
-.message.ai .message-content,
-.message.bot .message-content {
-    background: var(--ai-message-background);
-    color: var(--ai-message-text-color);
-    border-bottom-left-radius: 4px;
-    margin-right: 60px;
-}
 
 /* Message text content */
 .message-text {
@@ -435,10 +398,7 @@
 }
 
 /* Hover effects voor message bubbles */
-.message-content:hover {
+/* moved to ChatMessage.vue scoped styles */
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
 
 /* Bestaande animation en date-separator blijven hetzelfde */
 @keyframes messageSlideIn {
@@ -483,11 +443,7 @@
         padding: 0 15px;
     }
 
-    .message-content {
+    /* moved to ChatMessage.vue scoped styles */
-        max-width: 85%;
-        padding: 10px 14px;
-        font-size: 14px;
-    }
 
     .message.user .message-content {
         margin-left: 40px;
@@ -504,11 +460,7 @@
         padding: 0 10px;
     }
 
-    .message-content {
+    /* moved to ChatMessage.vue scoped styles */
-        max-width: 90%;
-        margin-left: 20px !important;
-        margin-right: 20px !important;
-    }
 }
 
 /* Progress Tracker Styling */

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

@@ -15,11 +15,7 @@
     margin-right: auto;
 }
 
-.message-content {
+/* moved to ChatMessage.vue scoped styles */
-    width: 100%;
-    font-family: Arial, sans-serif;
-    font-size: 14px;
-}
 
 /* Tabel styling voor formulieren */
 .form-result-table {

eveai_chat_client/static/assets/css/chat.css

@@ -218,15 +218,7 @@ body {
 
 /* .message-content wordt nu gedefinieerd in chat-components.css */
 
-.user-message .message-content {
+/* moved to ChatMessage.vue scoped styles */
-    background-color: var(--message-user-bg);
-    color: var(--text-color);
-}
-
-.bot-message .message-content {
-    background-color: var(--message-bot-bg);
-    color: var(--text-color);
-}
 
 /* .chat-input-container wordt nu gedefinieerd in chat-components.css */
 

eveai_chat_client/static/assets/css/form-message.css

@@ -54,6 +54,4 @@
     word-break: break-word;
 }
 
-.message-content {
+/* moved to ChatMessage.vue scoped styles */
-    max-width: 100%;
-}

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

@@ -383,8 +383,8 @@ export default {
 
 /* User messages with forms get fixed width of 90% */
 .message.user.has-form {
-    width: 90%;
+    width: auto; /* niet breder maken dan standaard */
-    max-width: none;
+    max-width: 100%;
 }
 
 /* Styling for temporarily positioned AI messages */
@@ -421,9 +421,18 @@ export default {
     padding: 12px;
 }
 .message-content {
-    width: 100%;
     font-family: Arial, sans-serif;
-    font-size: 14px;
+    font-size: 12px;
+    max-width: 90%;
+    padding: 8px;
+    border-radius: 10px;
+    word-wrap: break-word;
+    position: relative;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    transition: all 0.2s ease;
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 /* EveAI Logo styling voor AI berichten */
@@ -448,12 +457,26 @@ export default {
 
 /* Formulier styling */
 .form-display {
-    margin: 15px 0;
     color: var(--human-message-text-color);
-    padding: 15px;
     font-family: inherit;
 }
 
+/* Neutraliseer dynamic-form look binnen message bubble voor user-form-values */
+.user-form-values .message-form .dynamic-form {
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+.user-form-values .message-form .form-readonly,
+.user-form-values .message-form .form-field-readonly,
+.user-form-values .message-form .field-label,
+.user-form-values .message-form .field-value {
+    max-width: 90%;
+    box-sizing: border-box;
+}
+
 /* Tabel styling voor formulieren */
 .form-result-table {
     width: 100%;
@@ -612,13 +635,65 @@ export default {
         max-width: 95%;
     }
     
-    /* User messages with forms get fixed width of 95% on mobile */
+    /* User messages with forms: hou zelfde breedte als gewone tekst */
     .message.user.has-form {
-        width: 95%;
+        width: auto;
+        max-width: 100%;
     }
     
     .form-result-table td:first-child {
         width: 40%;
     }
 }
+/* migrated from global css: message-content visuals */
+.message.user .message-content {
+    background: var(--human-message-background);
+    color: var(--human-message-text-color);
+    border-bottom-right-radius: 4px;
+}
+
+.message.ai .message-content,
+.message.bot .message-content {
+    background: var(--ai-message-background);
+    color: var(--ai-message-text-color);
+    border-bottom-left-radius: 4px;
+    margin-right: 60px;
+}
+
+/* Hover effects for message bubbles */
+.message-content:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* Handle empty message content during processing */
+.message-content:has(.message-text:empty) .message-progress {
+    margin-bottom: 0;
+}
+.message-content:has(.message-text:empty):not(:has(.message-progress.completed)):not(:has(.message-progress.error)) {
+    background: transparent;
+    box-shadow: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Mobile responsiveness moved from global */
+@media (max-width: 768px) {
+    .message.user .message-content {
+        margin-left: 40px;
+    }
+    .message.ai .message-content,
+    .message.bot .message-content {
+        margin-right: 40px;
+    }
+}
+
+@media (max-width: 480px) {
+    .message-content {
+        max-width: 90%;
+        margin-left: 20px !important;
+        margin-right: 20px !important;
+    }
+}
 </style>

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

@@ -547,6 +547,8 @@ export default {
     border-radius: 8px;
     padding: 15px;
     box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+    box-sizing: border-box;
+    max-width: 100%;
 }
 
 .form-header {
@@ -558,7 +560,9 @@ export default {
 }
 
 .dynamic-form.readonly .form-header {
-    border-bottom: 1px solid #777;
+    border-bottom: none; /* alle borders weg in readonly */
+    padding-bottom: 0;
+    margin-bottom: 8px;
 }
 
 .form-icon {
@@ -722,34 +726,86 @@ export default {
 
 /* Read-only form styling */
 .form-readonly {
-    padding: 10px 0;
+    padding: 8px 0; /* compacter binnen bubble */
+    box-sizing: border-box;
+    max-width: 100%;
 }
 
 .form-field-readonly {
     display: flex;
-    margin-bottom: 8px;
+    align-items: flex-start;
-    padding-bottom: 8px;
+    gap: 8px;
+    margin-bottom: 6px; /* compacter */
+    padding-bottom: 6px;
+    line-height: 1.3; /* iets compacter */
+    box-sizing: border-box;
+    max-width: 100%;
 }
 
 .dynamic-form.readonly .form-field-readonly {
-    border-bottom: 1px solid #777;
+    border-bottom: none; /* alle borders weg in readonly */
 }
 
 .field-label {
     flex: 0 0 30%;
     font-weight: 500;
-    padding-right: 10px;
+    padding-right: 8px;
+    box-sizing: border-box;
+    max-width: 100%;
 }
 
 .field-value {
     flex: 1;
-    word-break: break-word;
+    overflow-wrap: anywhere; /* desktop: meerregelig zonder overflow */
+    box-sizing: border-box;
+    max-width: 100%;
 }
 
 .text-value {
     white-space: pre-wrap;
 }
 
+/* Responsive aanpassingen voor read-only binnen message bubbles */
+@media (min-width: 768px) {
+  /* Desktop en groter: geen ellipsis, laat tekst wrappen */
+  .dynamic-form.readonly .field-label,
+  .dynamic-form.readonly .field-value {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+  }
+}
+
+@media (max-width: 767.98px) {
+  /* Mobiel: label boven waarde, vet label, ellipsis op één regel */
+  .dynamic-form.readonly .form-field-readonly {
+    display: block;
+    border-bottom: none; /* alle borders weg in readonly */
+  }
+  .dynamic-form.readonly .field-label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 3px; /* kleine afstand tussen label en waarde */
+    padding-right: 0;
+    flex: none;
+  }
+  .dynamic-form.readonly .field-value {
+    display: block;
+  }
+  .dynamic-form.readonly .field-label,
+  .dynamic-form.readonly .field-value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* Specifieke override voor text-value die anders pre-wrap afdwingt */
+  .dynamic-form.readonly .field-value.text-value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 /* Boolean icon styling */
 .boolean-icon {
     font-size: 20px;

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

@@ -220,7 +220,7 @@ export default {
 }
 
 .message-content {
-    max-width: 100%;
+    max-width: 90%;
 }
 
 /* Responsive adjustments */
@@ -294,4 +294,13 @@ 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;
+    border: 1px solid #e9ecef;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
 </style>