From 44e5dd5d0279fb83aafa1a216a88b42a6189a68b Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Tue, 23 Sep 2025 06:55:31 +0200
Subject: [PATCH] - Ensuring good display of the eveai logo in the mobile
 version.

---
 .../assets/vue-components/ChatMessage.vue     | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
index 5a59c39..b206737 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
+++ b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
@@ -1,15 +1,15 @@
 <template>
     <div :class="getMessageClass()" :data-message-id="message.id">
+        <!-- EveAI Logo buiten de scroller, vast aan de bubble -->
+        <img 
+            v-if="message.sender === 'ai'" 
+            :src="staticUrl('/assets/img/eveai_logo.svg')"
+            alt="EveAI" 
+            class="ai-message-logo"
+        />
         <!-- Normal text messages -->
         <template v-if="message.type === 'text'">
             <div class="message-content" style="width: 100%;" ref="messageContent">
-                <!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
-                <img 
-                    v-if="message.sender === 'ai'" 
-                    :src="staticUrl('/assets/img/eveai_logo.svg')"
-                    alt="EveAI" 
-                    class="ai-message-logo"
-                />
                 <!-- Voortgangstracker voor AI berichten met task_id - ALLEEN VOOR LAATSTE AI MESSAGE -->
                 <progress-tracker 
                     v-if="message.sender === 'ai' && message.taskId && isLatestAiMessage" 
@@ -102,13 +102,6 @@
         <!-- Error messages -->
         <template v-else-if="message.type === 'error'">
             <div class="message-content error-content">
-                <!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
-                <img 
-                    v-if="message.sender === 'ai'" 
-                    :src="staticUrl('/assets/img/eveai_logo.svg')"
-                    alt="EveAI" 
-                    class="ai-message-logo"
-                />
                 <div class="form-error">
                     {{ message.content }}
                 </div>
@@ -121,13 +114,6 @@
         <!-- Other message types -->
         <template v-else>
             <div class="message-content" ref="messageContent">
-                <!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
-                <img 
-                    v-if="message.sender === 'ai'" 
-                    :src="staticUrl('/assets/img/eveai_logo.svg')"
-                    alt="EveAI" 
-                    class="ai-message-logo"
-                />
                 <div class="message-text" v-html="formatMessage(message.content)"></div>
             </div>
         </template>
@@ -459,25 +445,23 @@ export default {
 }
 
 /* EveAI Logo styling voor AI berichten */
+/* Position relative on the message container to anchor the logo (sibling of .message-content) */
+.message.ai {
+    position: relative;
+}
 .ai-message-logo {
     position: absolute;
     top: -20px;
-    left: -20px;
+    left: -5px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background-color: var(--ai-message-background);
-    padding: 2px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     z-index: 10;
     pointer-events: none;
 }
 
-/* Ensure message-content has relative positioning for logo positioning */
-.message.ai .message-content {
-    position: relative;
-}
-
 /* Formulier styling */
 .form-display {
     color: var(--human-message-text-color);
@@ -710,6 +694,18 @@ export default {
     .message.bot .message-content {
         margin-right: 40px;
     }
+    /* 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) {