Merge pull request #517 from subugoe/witnesses-flex-wrapper

fix: make the witnesses wrapper with flex-wrap css prop
subugoe · Nov 6, 2024 · 28cb111 · 28cb111
2 parents 56853bd + 936c1e8
commit 28cb111
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/src/components/annotations/variants/VariantsList.vue b/src/components/annotations/variants/VariantsList.vue
@@ -67,23 +67,21 @@ function getWitnessColor(witness: string) {
 }
 
 function getVariantsListInfoMessage(): string {
-  if (annotationStore.filteredAnnotations.length === 0) {
-    return i18n[lang.value]['no_annotations_in_view']
-  }
-  if (annotationStore.isSingleSelectMode) {
+  if (annotationStore.isSingleSelectMode 
+        && annotationStore.filteredAnnotations.length > 0) {
     return i18n[lang.value]['single_select_mode_info_message']
   }
+  return i18n[lang.value]['no_annotations_in_view']
 }
 
 function getVariantsListInfoTitle(): string {
-  if (annotationStore.filteredAnnotations.length === 0) {
-    return i18n[lang.value]['no_annotations_available']
-  }
-  if (annotationStore.isSingleSelectMode) {
+  if (annotationStore.isSingleSelectMode 
+        && annotationStore.filteredAnnotations.length > 0) {
     return i18n[lang.value]['single_select_mode']
   }
+  return i18n[lang.value]['no_annotations_available']
 }
-
+ 
 
 function showLineSeparator(visibleAnnotations, i) {
   if (visibleAnnotations[i+1]) {

diff --git a/src/utils/annotations.js b/src/utils/annotations.js
@@ -272,7 +272,7 @@ export function addWitness(target, witness, color) {
 
 function createWitnessesWrapper() {
   const el = document.createElement("span");
-  el.classList.add('witnesses')
+  el.classList.add('witnesses', 't-inline-flex', 't-flex-wrap')
 
   return el
 }
@@ -281,7 +281,7 @@ function createWitnessEl(witness, witnessColor) {
   // create an html element of one witness
   const el = document.createElement("span");
   el.innerHTML = witness
-  el.classList.add('t-rounded-3xl', 't-box-border', 't-h-8', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-font-sans', 't-ml-[3px]')
+  el.classList.add('t-rounded-3xl', 't-box-border', 't-py-0.5', 't-px-1.5', 't-text-xs', 't-font-semibold', 't-font-sans', 't-ml-[3px]')
   el.style.background = colors[witnessColor]['100']
   el.style.color = colors[witnessColor]['600']