From e959febbf836a2d73a2acf2352be60bab0fd18d5 Mon Sep 17 00:00:00 2001
From: alan-wu <alan.wu@auckland.ac.nz>
Date: Tue, 5 Nov 2024 11:36:40 +1300
Subject: [PATCH] Make sure contextual information does not flip up.

---
 src/components/ContentBar.vue  | 20 ++++++++++++++++----
 src/components/ContentVuer.vue |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/ContentBar.vue b/src/components/ContentBar.vue
index 3c4aab14..2ae91579 100644
--- a/src/components/ContentBar.vue
+++ b/src/components/ContentBar.vue
@@ -149,10 +149,22 @@ export default {
     },
     popperOptions: function() {
       return {
-        preventOverflow: {
-          enabled: true,
-          boundary: this.boundariesElement,
-        }
+        modifiers: [
+          {
+            name: 'preventOverflow',
+            options: {
+              boundary: this.boundariesElement,
+            }
+          },
+          {
+            name: 'flip',
+            options: {
+              boundary: this.boundariesElement,
+              flipVariations: false,
+              allowedAutoPlacements: ['bottom'],
+            }
+          },
+        ]
       }
     },
     entries: function() {
diff --git a/src/components/ContentVuer.vue b/src/components/ContentVuer.vue
index 82d68164..cd60253b 100644
--- a/src/components/ContentVuer.vue
+++ b/src/components/ContentVuer.vue
@@ -117,7 +117,7 @@ export default {
       this.$refs.viewer?.searchSuggestions(term, suggestions);
     },
     setPanesBoundary: function() {
-      this.$refs.contentBar?.setBoundary(this.$refs["container"][0]);
+      this.$refs.contentBar?.setBoundary(this.$refs["container"]);
     },
     speciesChanged: function (species) {
       this.activeSpecies = species;