feat(SegmentGroupControls): ellipsis + tooltip for long seg names

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>

src/components/SegmentList.vue

@@ -96,8 +96,6 @@ const toggleVisible = (value: number) => {
   });
 };
 
-// If all selected tools are already hidden, it should be "show".
-// If at least one selected tool is visible, it should be "hide".
 const allVisible = computed(() => {
   return segments.value.every((seg) => seg.visible);
 });