- verbeteringen client

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

@@ -333,12 +333,6 @@ export default {
     margin-bottom: 20px;
 }
 
-@media (min-width: 768px) {
-    .form-fields {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
 .form-field {
     margin-bottom: 5px;
 }

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

@@ -1,15 +1,17 @@
 <template>
-    <div class="form-field" style="margin-bottom: 15px; display: grid; grid-template-columns: 35% 65%; align-items: center;">
+    <div class="form-field" :class="{ 'radio-field': fieldType === 'radio' }" style="margin-bottom: 15px;">
         <!-- Label voor alle velden behalve boolean/checkbox die een speciale behandeling krijgen -->
-        <label v-if="fieldType !== 'checkbox'" :for="fieldId" style="margin-right: 10px; font-weight: 500;">
+        <label v-if="fieldType !== 'checkbox'" :for="fieldId" class="field-label" :class="{ 'tooltip-label': description }">
             {{ field.name }}
             <span v-if="field.required" class="required" style="color: #d93025; margin-left: 2px;">*</span>
+            <!-- Tooltip voor description -->
+            <span v-if="description" class="tooltip-content">{{ description }}</span>
         </label>
 
         <!-- Container voor input velden -->
         <div style="width: 100%;">
             <!-- Context informatie indien aanwezig -->
-            <div v-if="field.context" class="field-context" style="margin-bottom: 8px; font-size: 0.9em; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px; border-left: 3px solid #4285f4;">
+            <div v-if="field.context" class="field-context" style="margin-bottom: 8px; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px;">
                 {{ field.context }}
             </div>
             
@@ -70,12 +72,11 @@
             </select>
 
             <!-- Radio buttons (options) -->
-            <div v-if="fieldType === 'radio'" class="radio-group" style="display: flex; flex-direction: column; gap: 8px;">
+            <div v-if="fieldType === 'radio'" class="radio-group">
                 <label 
                     v-for="option in (field.allowedValues || field.allowed_values || [])" 
                     :key="option"
                     class="radio-label"
-                    style="display: flex; align-items: center; cursor: pointer;"
                 >
                     <input 
                         type="radio" 
@@ -83,7 +84,6 @@
                         :value="option"
                         v-model="value"
                         :required="field.required"
-                        style="margin-right: 8px;"
                     >
                     <span>{{ option }}</span>
                 </label>
@@ -162,10 +162,6 @@
                 style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ddd; box-sizing: border-box;"
             >
 
-            <!-- Beschrijving/help tekst -->
-            <small v-if="description" class="field-description" style="display: block; margin-top: 5px; font-size: 0.8rem; color: #777; line-height: 1.4;">
-                {{ description }}
-            </small>
         </div>
     </div>
 </template>
@@ -248,10 +244,81 @@ export default {
 </script>
 
 <style scoped>
+/* Form field layout */
 .form-field {
     margin-bottom: 15px;
+    display: grid;
+    grid-template-columns: 35% 65%;
+    align-items: start;
+    gap: 10px;
 }
 
+/* Radio field special layout - full width for better alignment */
+.form-field.radio-field {
+    display: block;
+}
+
+.form-field.radio-field .field-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.form-field.radio-field .field-context {
+    margin-left: 0;
+    margin-bottom: 12px;
+}
+
+/* Field label styling */
+.field-label {
+    margin-right: 10px;
+    font-weight: 500;
+    position: relative;
+}
+
+/* Tooltip functionality */
+.tooltip-label {
+    cursor: help;
+}
+
+.tooltip-content {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: 1000;
+    bottom: 125%;
+    left: 0;
+    background-color: #333;
+    color: white;
+    text-align: left;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: normal;
+    line-height: 1.4;
+    white-space: normal;
+    max-width: 300px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    transition: opacity 0.3s, visibility 0.3s;
+}
+
+.tooltip-content::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 20px;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #333 transparent transparent transparent;
+}
+
+.tooltip-label:hover .tooltip-content {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Input field focus styling */
 .form-field input:focus,
 .form-field select:focus,
 .form-field textarea:focus {
@@ -260,29 +327,48 @@ export default {
     box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
 }
 
+/* Radio button styling */
 .radio-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    margin-top: 4px;
 }
 
-.radio-label {
+.radio-label[data-v-8b0edd] {
     display: flex;
     align-items: center;
-    cursor: pointer;
-    font-size: 0.9rem;
-    color: #555;
+    justify-content: flex-start;
+    gap: 12px;
+    width: 100%;
 }
 
+.radio-label input[type="radio"] {
+    flex: 0 0 20px; /* fixed width of 20px, no growing/shrinking */
+    height: 13px;
+    width: 13px;
+    margin: 0;
+    vertical-align: middle;
+}
+
+.radio-label span {
+    flex: 1; /* take up all remaining space */
+    word-break: break-word; /* break long words if needed */
+    margin-left: 12px;
+}
+
+/* Checkbox styling */
 .checkbox-container {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
 }
 
 .checkbox-label {
     display: flex;
     align-items: center;
     cursor: pointer;
+    text-align: left;
 }
 
 .checkbox-text {
@@ -290,22 +376,15 @@ export default {
     color: #555;
 }
 
-.field-description {
-    display: block;
-    margin-top: 5px;
-    font-size: 0.8rem;
-    color: #777;
-    line-height: 1.4;
-}
-
+/* Context field styling */
 .field-context {
     margin-bottom: 8px;
-    font-size: 0.9em;
+    font-size: 0.9rem;
     color: #666;
     background-color: #f8f9fa;
     padding: 8px;
     border-radius: 4px;
-    border-left: 3px solid #4285f4;
+    text-align: left;
 }
 
 .required {
@@ -316,13 +395,23 @@ export default {
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .form-field {
-        display: block !important;
-        grid-template-columns: none !important;
+        display: block;
+        grid-template-columns: none;
     }
     
-    .form-field label {
+    .form-field .field-label {
         margin-bottom: 8px;
         display: block;
     }
+    
+    .tooltip-content {
+        position: fixed;
+        left: 10px;
+        right: 10px;
+        max-width: none;
+        bottom: auto;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 }
 </style>

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

@@ -93,7 +93,6 @@ onMounted(() => {
 <style scoped>
 .sidebar-explanation {
   padding: 15px;
-  flex: 1;
   overflow-y: auto;
 }