- Layout improvements for the Chat client

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

@@ -1,6 +1,6 @@
 <template>
     <div class="dynamic-form-container">
-        <div class="dynamic-form">
+        <div class="dynamic-form" :class="{ 'readonly': readOnly, 'edit': !readOnly }">
             <!-- Form header with icon and title -->
             <div v-if="formData.title || formData.name || formData.icon" class="form-header">
                 <div v-if="formData.icon" class="form-icon">
@@ -292,10 +292,7 @@ export default {
 /* Dynamisch formulier stijlen */
 .dynamic-form-container {
     margin-bottom: 15px;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
     overflow: hidden;
-    background-color: #f9f9f9;
 }
 
 .dynamic-form {
@@ -307,7 +304,11 @@ export default {
     align-items: center;
     margin-bottom: 15px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--active-text-color);
+}
+
+.dynamic-form.readonly .form-header {
+    border-bottom: 1px solid var(--history-message-text-color);
 }
 
 .form-icon {
@@ -317,13 +318,21 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #555;
+    color: var(--active-text-color);
+}
+
+.dynamic-form.readonly .form-icon {
+    color: var(--history-message-text-color);
 }
 
 .form-title {
     font-size: 1.2rem;
     font-weight: 600;
-    color: #333;
+    color: var(--active-text-color);
+}
+
+.dynamic-form.readonly .form-title {
+    color: var(--history-message-text-color);
 }
 
 .form-fields {
@@ -472,21 +481,31 @@ export default {
     display: flex;
     margin-bottom: 8px;
     padding-bottom: 8px;
-    border-bottom: 1px solid #eee;
+}
+
+.dynamic-form.readonly .form-field-readonly {
+    border-bottom: 1px solid var(--history-message-text-color);
 }
 
 .field-label {
     flex: 0 0 30%;
     font-weight: 500;
-    color: #555;
     padding-right: 10px;
 }
 
+.dynamic-form.readonly .field-label {
+    color: var(--history-message-text-color);
+}
+
 .field-value {
     flex: 1;
     word-break: break-word;
 }
 
+.dynamic-form.readonly .field-value {
+    color: var(--history-message-text-color);
+}
+
 .text-value {
     white-space: pre-wrap;
 }