From 55a840cdebb1ca70656ba343ab946686a39f6cd0 Mon Sep 17 00:00:00 2001
From: orlinmalkja <54899269+orlinmalkja@users.noreply.github.com>
Date: Mon, 11 Nov 2024 10:35:50 +0100
Subject: [PATCH] fix: truncate and add ellipses for long witnesses (#520)

* fix: truncate and add ellipses for long witnesses

* fix: view the full witness name on hover

---------

Co-authored-by: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
---
 src/components/annotations/variants/VariantItem.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/annotations/variants/VariantItem.vue b/src/components/annotations/variants/VariantItem.vue
index ce817282..afe7470e 100644
--- a/src/components/annotations/variants/VariantItem.vue
+++ b/src/components/annotations/variants/VariantItem.vue
@@ -8,13 +8,14 @@
     :data-annotation-id="annotation.id"
     @click="handleClick"
   >
-    <div class="t-w-4/12 t-flex">
+    <div class="t-w-1/3 t-flex">
       <div
-        class="t-relative t-rounded-3xl t-box-border t-px-2 t-py-1 t-text-xs t-flex-grow-0 t-flex t-items-center t-font-semibold t-whitespace-nowrap"
+        class="t-relative t-truncate t-w-7/8 t-rounded-3xl t-box-border t-px-2 t-py-1 t-text-xs t-flex-grow-0 t-font-semibold"
         :style="{
           'background': colors[witnessColor]['100'],
           'color': colors[witnessColor]['600']
         }"
+        :title = witness
       >
         {{ witness ?? '-' }}
       </div>
@@ -33,7 +34,7 @@ import { computed } from 'vue';
 import colors from "tailwindcss/colors";
 
 const entry = computed(() => props.annotation.body.value.entry)
-const witness = computed(() => props.annotation.body.value.witness)
+const witness= computed(() => props.annotation.body.value.witness)
 
 export interface Props {
   annotation: Annotation,