From fba4e365381c031f02d5222a039391b882b261b1 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Wed, 23 Jul 2025 15:38:02 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20bug=20fixed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/badge/VBadge.vue | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/badge/VBadge.vue b/src/components/badge/VBadge.vue
index 99a6f84..e474e5d 100644
--- a/src/components/badge/VBadge.vue
+++ b/src/components/badge/VBadge.vue
@@ -23,15 +23,17 @@ const severity = computed(() => {
 
 const icon = computed(() => {
   switch (props.type) {
-    case 'error': return 'ri-close-circle-fill';
-    case 'warning' : return 'ri-alert-fill';
-    case 'success' : return 'ri-checkbox-circle-fill';
-    case 'info': return 'ri-information-fill';
-    case 'new': return 'ri-flashlight-fill';
+    case 'error': return 'ri-close-circle-line';
+    case 'warning' : return 'ri-alert-line';
+    case 'success' : return 'ri-checkbox-circle-line';
+    case 'info': return 'ri-information-line';
+    case 'new': return 'ri-flashlight-line';
     default:
       return undefined;
     }
 })
+
+const limit = computed(() => props.maxWidth);
 </script>
 
 <template>
@@ -39,25 +41,31 @@ const icon = computed(() => {
     role="alert"
     :value="props.label"
     :severity="severity"
+    :title="props.label"
     class="p-tag"
-    :style="(!!props.maxWidth) ? {width: props.maxWidth} : {width: 'fit-content'}"
     :class="{'small': props.small}"
   >
-    <template v-if="!props.noIcon || props.type === undefined">
-      <i :class="icon"></i>
-    </template>
+    <i v-if="!props.noIcon || props.type === undefined" :class="icon"></i>
+    <span :class="{'limit': props.maxWidth}">{{ props.label }}</span>
   </Tag>
 </template>
 
 <style lang="css" scoped>
+.p-tag{height: fit-content;}
 .p-tag.small{
   --p-tag-icon-size: var( --text-body-SM-detail-text-Maj-size);
   --p-tag-font-size: var( --text-body-XS-mention-text-Maj-size);
   --p-tag-font-weight: var( --text-body-XS-mention-text-Maj-weight);
   --p-tag-padding: 0.125rem 0.325rem;
+  align-self: center;
+}
+
+.limit{
+  max-width: v-bind(limit);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 </style>