From 2350d1085ad5d66aedb57d3f03cc95ede1c1de16 Mon Sep 17 00:00:00 2001
From: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
Date: Thu, 7 Nov 2024 15:58:53 +0100
Subject: [PATCH 1/2] fix: truncate and add ellipses for long witnesses

---
 src/components/annotations/variants/VariantItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/annotations/variants/VariantItem.vue b/src/components/annotations/variants/VariantItem.vue
index ce817282..b295f17f 100644
--- a/src/components/annotations/variants/VariantItem.vue
+++ b/src/components/annotations/variants/VariantItem.vue
@@ -8,9 +8,9 @@
     :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']

From 373b983489fa62de9eec4928259f024845b809d9 Mon Sep 17 00:00:00 2001
From: orlinmalkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 8 Nov 2024 11:21:52 +0100
Subject: [PATCH 2/2] fix: view the full witness name on hover

---
 src/components/annotations/variants/VariantItem.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/annotations/variants/VariantItem.vue b/src/components/annotations/variants/VariantItem.vue
index b295f17f..afe7470e 100644
--- a/src/components/annotations/variants/VariantItem.vue
+++ b/src/components/annotations/variants/VariantItem.vue
@@ -15,6 +15,7 @@
           '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,