fix: add ellipsis to menu item if label is too long (#79)

Astaldos · Petr Kachanovsky · web-flow · commit 736b29abe5e6 · 2025-01-22T11:36:24.000+02:00
Co-authored-by: Petr Kachanovsky &lt;pkachanovsky@devforth.io&gt;
diff --git a/adminforth/spa/src/components/MenuLink.vue b/adminforth/spa/src/components/MenuLink.vue
@@ -11,7 +11,7 @@
       }"
   >
     <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 class="text-ellipsis overflow-hidden ms-3">{{ item.label }}</span>
     <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]"
     >

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`}"`
`12`	`12`	`>`
`13`	`13`	`<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>`
`14`		`- <span class="ms-3">{{ item.label }}</span>`
	`14`	`+ <span class="text-ellipsis overflow-hidden ms-3">{{ item.label }}</span>`
`15`	`15`	`<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`
`16`	`16`	`fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]"`
`17`	`17`	`>`