From afbb71607df81c915af43d2262efdd92e8c85e9e Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Sat, 6 Feb 2021 15:32:27 +0000
Subject: [PATCH] Fix placement of tour messages for icons

The tour pop-ups were getting stuck in the tab icon container.
Explicitly specifying that they could overflow said container,
and setting them to show to the right, seems to have fixed this issue.
---
 openflexure_microscope/api/static/src/App.vue | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/openflexure_microscope/api/static/src/App.vue b/openflexure_microscope/api/static/src/App.vue
index 26165824..800396c3 100644
--- a/openflexure_microscope/api/static/src/App.vue
+++ b/openflexure_microscope/api/static/src/App.vue
@@ -115,6 +115,14 @@ export default {
       };
     },
     tourSteps: function() {
+      let tabPopperParams = {
+        modifiers: {
+          preventOverflow: {
+            boundariesElement: "window"
+          }
+        },
+        placement: "right"
+      };
       return [
         {
           target: "#tour-header", // We're using document.querySelector() under the hood
@@ -131,35 +139,40 @@ export default {
           header: {
             title: "Capture gallery"
           },
-          content: `View and download your microscope images from the gallery tab`
+          content: `View and download your microscope images from the gallery tab`,
+          params: tabPopperParams
         },
         {
           target: "#navigate-tab-icon",
           header: {
             title: "Navigate around your sample"
           },
-          content: `Move your microscope stage and perform autofocus from the navigate tab`
+          content: `Move your microscope stage and perform autofocus from the navigate tab`,
+          params: tabPopperParams
         },
         {
           target: "#capture-tab-icon",
           header: {
             title: "Capture microscope images"
           },
-          content: `Take images and simple tile scans from the capture tab`
+          content: `Take images and simple tile scans from the capture tab`,
+          params: tabPopperParams
         },
         {
           target: "#settings-tab-icon",
           header: {
             title: "Change settings"
           },
-          content: `Change app and microscope settings, including microscope calibration, from the settings tab`
+          content: `Change app and microscope settings, including microscope calibration, from the settings tab`,
+          params: tabPopperParams
         },
         {
           target: "#extension-tab-divider",
           header: {
             title: "Microscope extensions"
           },
-          content: `Extensions installed on your microscope will appear below this line`
+          content: `Extensions installed on your microscope will appear below this line`,
+          params: tabPopperParams
         }
       ];
     }