From eb213d0ad3d4a31a38519bc5d4eff3308a497e47 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Wed, 14 Jan 2026 09:14:23 +0900
Subject: [PATCH] feat: add overflow tooltip to NavItem (#8009)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
- Add text truncation with ellipsis to NavItem when text overflows
- Show tooltip on hover only when text is truncated
- Use on-demand overflow check (mouseenter) instead of ResizeObserver
for better performance

## Test plan
- [x] Verify NavItem text truncates with ellipsis when it overflows
- [x] Verify tooltip appears on hover only when text is truncated
- [x] Verify tooltip does not appear when text fits without truncation

<img width="1517" height="1028" alt="스크린샷 2026-01-13 오후 2 20 20"
src="https://github.com/user-attachments/assets/3b531785-a567-4e87-9540-fcbab0fe1de6"
/>

🤖 Generated with [Claude Code](https://claude.com/claude-code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8009-feat-add-overflow-tooltip-to-NavItem-2e76d73d3650815a9d7cefb3f0bf2daa)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 src/components/widget/nav/NavItem.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index c564dfcae..8c20ad929 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -1,5 +1,10 @@
 <template>
   <div
+    v-tooltip.right="{
+      value: tooltipText,
+      disabled: !isOverflowing,
+      pt: { text: { class: 'whitespace-nowrap' } }
+    }"
     class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
     :class="
       active
@@ -7,19 +12,22 @@
         : 'hover:bg-interface-menu-component-surface-hovered'
     "
     role="button"
+    @mouseenter="checkOverflow"
     @click="onClick"
   >
     <div v-if="icon" class="pt-0.5">
       <NavIcon :icon="icon" />
     </div>
     <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
-    <span class="flex items-center break-all">
+    <span ref="textRef" class="min-w-0 truncate">
       <slot></slot>
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
 import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'
@@ -29,4 +37,15 @@ const { icon, active, onClick } = defineProps<{
   active?: boolean
   onClick: () => void
 }>()
+
+const textRef = ref<HTMLElement | null>(null)
+const isOverflowing = ref(false)
+
+const checkOverflow = () => {
+  if (!textRef.value) return
+  isOverflowing.value =
+    textRef.value.scrollWidth > textRef.value.clientWidth + 1
+}
+
+const tooltipText = computed(() => textRef.value?.textContent ?? '')
 </script>