From f3e6a540cef3b36f904b2ec85c2ff351b460b10b Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Wed, 23 Jul 2025 10:23:22 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor:=20Component?=
 =?UTF-8?q?=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/hint/VHint.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
index 455181a..1a3b039 100644
--- a/src/components/hint/VHint.vue
+++ b/src/components/hint/VHint.vue
@@ -39,21 +39,28 @@ const severity = computed(() => {
   <Message
     variant="simple"
     :severity="severity"
+    class="p-message"
     :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
-    :icon="props.icon ? iconClass: undefined"
     :closable="false"
     size="small"
     role="alert"
   >
     {{ props.title }}
+    <template #icon v-if="props.icon">
+      <i :class="[iconClass]" style="font-size: var(--text-body-SM-detail-text-Regular-size);"></i>
+    </template>
   </Message>
 </template>
 
 <style scoped>
 .p-message.disabled {color: var(--text-disabled-grey);}
 
-.p-message-icon{
+.p-message {
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  align-items: baseline;
+  padding: 0px;
+  gap: var(--p-message-content-gap);
+  height: 100%;
 }
 </style>