fix: update MenuLink component to enhance badge alignment with flexbox

SerVitasik · SerVitasik · commit 5c67a4c42de2 · 2025-11-21T13:59:03.000+02:00
diff --git a/adminforth/spa/src/components/MenuLink.vue b/adminforth/spa/src/components/MenuLink.vue
@@ -33,7 +33,7 @@
     >
       {{ item.label }}
     </div>
-    <span class="absolute right-1 top-1/2 -translate-y-1/2" v-if="item.badge && showExpandedBadge">
+    <span class="absolute flex items-center justify-center right-1 top-1/2 -translate-y-1/2" v-if="item.badge && showExpandedBadge">
       <Tooltip v-if="item.badgeTooltip">
         <div class="af-badge inline-flex items-center justify-center h-3 py-2.5 px-1 ms-3 text-xs 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]">{{ item.badge }}</div>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`>`
`34`	`34`	`{{ item.label }}`
`35`	`35`	`</div>`
`36`		`- <span class="absolute right-1 top-1/2 -translate-y-1/2" v-if="item.badge && showExpandedBadge">`
	`36`	`+ <span class="absolute flex items-center justify-center right-1 top-1/2 -translate-y-1/2" v-if="item.badge && showExpandedBadge">`
`37`	`37`	`<Tooltip v-if="item.badgeTooltip">`
`38`	`38`	`<div class="af-badge inline-flex items-center justify-center h-3 py-2.5 px-1 ms-3 text-xs font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG`
`39`	`39`	`fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>`