From 5ff261e03df9d9be2bec6b578ba69465a1108c6a Mon Sep 17 00:00:00 2001
From: Petr Kachanovsky <pkachanovsky@devforth.io>
Date: Wed, 15 Jan 2025 10:40:40 +0200
Subject: [PATCH 1/2] fix: change budge width bounds

---
 adminforth/spa/src/components/MenuLink.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/adminforth/spa/src/components/MenuLink.vue b/adminforth/spa/src/components/MenuLink.vue
index df8feb002..6dcee914e 100644
--- a/adminforth/spa/src/components/MenuLink.vue
+++ b/adminforth/spa/src/components/MenuLink.vue
@@ -12,8 +12,9 @@
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
     <span class="ms-3">{{ item.label }}</span>
-    <span v-if="item.badge" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+    <span v-if="item.badge" class="inline-flex items-center justify-center h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
           fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent"
+      style="min-width: 1.5rem; max-width: 3rem;"
     >
           
         <Tooltip v-if="item.badgeTooltip">

From 21c52f7afa396f14d10e64e1dcb693accec37c0b Mon Sep 17 00:00:00 2001
From: Petr Kachanovsky <pkachanovsky@devforth.io>
Date: Wed, 15 Jan 2025 10:52:46 +0200
Subject: [PATCH 2/2] fix: change badge padding

---
 adminforth/spa/src/components/MenuLink.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/adminforth/spa/src/components/MenuLink.vue b/adminforth/spa/src/components/MenuLink.vue
index 6dcee914e..e0ff87d30 100644
--- a/adminforth/spa/src/components/MenuLink.vue
+++ b/adminforth/spa/src/components/MenuLink.vue
@@ -12,9 +12,8 @@
   >
     <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-lightSidebarIcons dark:text-darkSidebarIcons  transition duration-75  group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover" ></component>
     <span class="ms-3">{{ item.label }}</span>
-    <span v-if="item.badge" class="inline-flex items-center justify-center h-3 p-3 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent"
-      style="min-width: 1.5rem; max-width: 3rem;"
+    <span v-if="item.badge" class="inline-flex items-center justify-center h-3 py-3 px-1 ms-3 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+          fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]"
     >
           
         <Tooltip v-if="item.badgeTooltip">