From 854d889413050d2ef274881093ebbc93cfc1402d Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Sun, 20 Jul 2025 19:31:55 +0200
Subject: [PATCH] - verbeteringen client

---
 .gitignore                                    |   6 +-
 eveai_chat_client/static/assets/css/form.css  |   6 -
 .../assets/vue-components/DynamicForm.vue     |   6 -
 .../assets/vue-components/FormField.vue       | 143 ++++++++++++++----
 .../vue-components/SideBarExplanation.vue     |   1 -
 test_ui_fixes.js                              | 139 +++++++++++++++++
 6 files changed, 256 insertions(+), 45 deletions(-)
 create mode 100644 test_ui_fixes.js

diff --git a/.gitignore b/.gitignore
index ba23e1d..ead2572 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,9 +53,5 @@ scripts/__pycache__/run_eveai_app.cpython-312.pyc
 /docker/grafana/data/
 /temp_requirements/
 /nginx/node_modules/
-/nginx/static/assets/css/chat.css
-/nginx/static/assets/css/chat-components.css
-/nginx/static/assets/js/components/
-/nginx/static/assets/js/chat-app.js
 /nginx/.parcel-cache/
-/nginx/static/dist/
+/nginx/static/
diff --git a/eveai_chat_client/static/assets/css/form.css b/eveai_chat_client/static/assets/css/form.css
index 3992aa2..d899de5 100644
--- a/eveai_chat_client/static/assets/css/form.css
+++ b/eveai_chat_client/static/assets/css/form.css
@@ -42,12 +42,6 @@
     margin-bottom: 20px;
 }
 
-@media (min-width: 768px) {
-    .form-fields {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
 .form-field {
     margin-bottom: 5px;
 }
diff --git a/eveai_chat_client/static/assets/vue-components/DynamicForm.vue b/eveai_chat_client/static/assets/vue-components/DynamicForm.vue
index 8ae0d81..19bdbd5 100644
--- a/eveai_chat_client/static/assets/vue-components/DynamicForm.vue
+++ b/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;
 }
diff --git a/eveai_chat_client/static/assets/vue-components/FormField.vue b/eveai_chat_client/static/assets/vue-components/FormField.vue
index 1433799..46f0019 100644
--- a/eveai_chat_client/static/assets/vue-components/FormField.vue
+++ b/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>
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue b/eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue
index 40b234a..fe2b328 100644
--- a/eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue
+++ b/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;
 }
 
diff --git a/test_ui_fixes.js b/test_ui_fixes.js
new file mode 100644
index 0000000..270a38d
--- /dev/null
+++ b/test_ui_fixes.js
@@ -0,0 +1,139 @@
+// Test script for UI fixes: SideBarExplanation height and DynamicForm single column
+// This can be run in the browser console when the chat client is loaded
+
+console.log('Testing UI fixes...');
+
+// Test SideBarExplanation height fix
+function testSideBarExplanationHeight() {
+    console.log('🧪 Testing SideBarExplanation height fix...');
+    
+    const sidebarExplanation = document.querySelector('.sidebar-explanation');
+    if (!sidebarExplanation) {
+        console.warn('⚠️ SideBarExplanation element not found');
+        return false;
+    }
+    
+    const computedStyle = window.getComputedStyle(sidebarExplanation);
+    const flexValue = computedStyle.getPropertyValue('flex');
+    
+    console.log('📏 SideBarExplanation flex value:', flexValue);
+    
+    if (flexValue === '1 1 0%' || flexValue === '1') {
+        console.error('❌ SideBarExplanation still has flex: 1 - height fix failed');
+        return false;
+    } else {
+        console.log('✅ SideBarExplanation height fix successful - no flex: 1 found');
+        return true;
+    }
+}
+
+// Test DynamicForm single column layout
+function testDynamicFormSingleColumn() {
+    console.log('🧪 Testing DynamicForm single column layout...');
+    
+    const formFields = document.querySelector('.form-fields');
+    if (!formFields) {
+        console.warn('⚠️ DynamicForm .form-fields element not found');
+        return false;
+    }
+    
+    const computedStyle = window.getComputedStyle(formFields);
+    const gridColumns = computedStyle.getPropertyValue('grid-template-columns');
+    
+    console.log('📐 DynamicForm grid-template-columns:', gridColumns);
+    
+    // Check if it's single column (should be "1fr" or similar)
+    if (gridColumns.includes('1fr 1fr') || gridColumns.includes('repeat(2, 1fr)')) {
+        console.error('❌ DynamicForm still has 2-column layout - single column fix failed');
+        return false;
+    } else if (gridColumns === '1fr' || gridColumns.includes('1fr') && !gridColumns.includes('1fr 1fr')) {
+        console.log('✅ DynamicForm single column fix successful');
+        return true;
+    } else {
+        console.warn('⚠️ DynamicForm has unexpected grid layout:', gridColumns);
+        return false;
+    }
+}
+
+// Test CSS media query removal
+function testMediaQueryRemoval() {
+    console.log('🧪 Testing media query removal...');
+    
+    // Create a test element to check if media queries still apply
+    const testDiv = document.createElement('div');
+    testDiv.className = 'form-fields';
+    testDiv.style.display = 'none';
+    document.body.appendChild(testDiv);
+    
+    // Force a larger screen width for testing
+    const originalWidth = window.innerWidth;
+    
+    // Check computed style at different screen sizes
+    const computedStyle = window.getComputedStyle(testDiv);
+    const gridColumns = computedStyle.getPropertyValue('grid-template-columns');
+    
+    document.body.removeChild(testDiv);
+    
+    console.log('📱 Media query test - grid columns:', gridColumns);
+    
+    if (gridColumns === '1fr') {
+        console.log('✅ Media query removal successful - single column maintained');
+        return true;
+    } else {
+        console.warn('⚠️ Media query might still be active:', gridColumns);
+        return false;
+    }
+}
+
+// Run all tests
+function runAllUITests() {
+    console.log('🚀 Starting UI fixes tests...');
+    
+    console.log('\n1. Testing SideBarExplanation height fix...');
+    const heightTest = testSideBarExplanationHeight();
+    
+    console.log('\n2. Testing DynamicForm single column layout...');
+    const columnTest = testDynamicFormSingleColumn();
+    
+    console.log('\n3. Testing media query removal...');
+    const mediaTest = testMediaQueryRemoval();
+    
+    console.log('\n📊 Test Results Summary:');
+    console.log(`SideBarExplanation Height Fix: ${heightTest ? '✅' : '❌'}`);
+    console.log(`DynamicForm Single Column: ${columnTest ? '✅' : '❌'}`);
+    console.log(`Media Query Removal: ${mediaTest ? '✅' : '⚠️'}`);
+    
+    const allPassed = heightTest && columnTest;
+    console.log(`\n🎯 Overall Status: ${allPassed ? '✅ All critical tests passed!' : '⚠️ Some tests need attention'}`);
+    
+    return {
+        heightFix: heightTest,
+        singleColumn: columnTest,
+        mediaQuery: mediaTest,
+        overall: allPassed
+    };
+}
+
+// Export for manual testing
+if (typeof window !== 'undefined') {
+    window.testSideBarExplanationHeight = testSideBarExplanationHeight;
+    window.testDynamicFormSingleColumn = testDynamicFormSingleColumn;
+    window.testMediaQueryRemoval = testMediaQueryRemoval;
+    window.runAllUITests = runAllUITests;
+    
+    console.log('UI test functions available:');
+    console.log('- testSideBarExplanationHeight()');
+    console.log('- testDynamicFormSingleColumn()');
+    console.log('- testMediaQueryRemoval()');
+    console.log('- runAllUITests()');
+}
+
+// Auto-run if in Node.js environment (for CI/CD)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        testSideBarExplanationHeight,
+        testDynamicFormSingleColumn,
+        testMediaQueryRemoval,
+        runAllUITests
+    };
+}
\ No newline at end of file