From 93e349acc77de64909971d441069e722ab860115 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 21 Oct 2024 13:35:26 -0400
Subject: [PATCH] feat(SegmentGroupControls): ellipsis + tooltip for long seg
 names

---
 src/components/EditableChipList.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/EditableChipList.vue b/src/components/EditableChipList.vue
index 3411863a..59786107 100644
--- a/src/components/EditableChipList.vue
+++ b/src/components/EditableChipList.vue
@@ -26,7 +26,7 @@ const props = withDefaults(
 const itemsToRender = computed(() =>
   props.items.map((item) => ({
     key: item[props.itemKey] as string | number | symbol,
-    title: item[props.itemTitle],
+    title: item[props.itemTitle] as string | undefined,
   }))
 );
 </script>
@@ -47,7 +47,11 @@ const itemsToRender = computed(() =>
             @click="toggle"
           >
             <slot name="item-prepend" :key="key" :item="items[idx]"></slot>
-            <span class="overflow-hidden">{{ title }}</span>
+            <v-tooltip :text="title" location="end">
+              <template #activator="{ props }">
+                <span v-bind="props" class="text-truncate">{{ title }}</span>
+              </template>
+            </v-tooltip>
             <v-spacer />
             <slot name="item-append" :key="key" :item="items[idx]"></slot>
           </v-chip>