prevent clicking outside of highland and scroll better to element

web-frontend/modules/core/assets/scss/components/guided_tour_step.scss

@@ -1,9 +1,16 @@
+.guided-tour-step__container {
+  background: transparent;
+  pointer-events: all;
+  z-index: $z-index-guided-tour-container;
+
+  @include absolute(0, 0, 0, 0);
+}
+
 .guided-tour-step {
   position: absolute;
   box-sizing: border-box;
   width: 326px;
   background-color: $palette-neutral-1200;
-  pointer-events: all;
   display: flex;
   flex-direction: column;
   z-index: $z-index-guided-tour-step;
@@ -28,7 +35,6 @@
 
   // Positioned right from the parent, aligned to the top of it.
   &--right-top {
-    top: 0;
     left: calc(100% + 12px);
 
     &::after {

web-frontend/modules/core/assets/scss/components/highlight.scss

@@ -6,7 +6,6 @@
   height: 200px;
   z-index: $z-index-highlight-overlay;
   box-sizing: content-box;
-  pointer-events: none;
   transition: top 0.1s ease, left 0.1s ease, width 0.1s ease, height 0.1s ease;
 
   @include rounded($rounded);

web-frontend/modules/core/assets/scss/variables.scss

@@ -27,6 +27,7 @@ $z-index-tooltip: 8 !default;
 $z-index-toasts: 9 !default;
 
 // This is an overlay over all element, so it must be the highest.
+$z-index-guided-tour-container: 99 !default;
 $z-index-highlight-overlay: 100 !default;
 $z-index-guided-tour-step: 101 !default;
 

web-frontend/modules/core/components/Highlight.vue

@@ -83,7 +83,11 @@ export default {
           this.scrollableParents.add(scrollableParent)
           scrollableParent.addEventListener('scroll', this.update)
         }
-        element.scrollIntoView({ behavior: 'smooth' })
+        element.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          block: 'center',
+        })
       })
     },
     update() {

web-frontend/modules/core/components/guidedTour/GuidedTour.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="activeGuidedTours.length > 0" class="guided-tour-step__container">
     <Highlight ref="highlight" :get-parent="getParent">
       <GuidedTourStep
         v-if="currentStep"