fix: guard guided tour highlight against missing target elements (baserow#5378)

* fix: guard guided tour highlight against missing target elements

Resolves baserow#5377

* fix: hide highlight overlay when no target elements match

Toggle a separate `visible` flag instead of leaving `selector` set when
no elements match. Otherwise the .highlight div stays rendered with its
5000px dimming box-shadow over an empty 0×0 box, dimming the whole UI
without showing a target.

* fix: keep guided tour controls mounted when highlight has no target

Falling back to the centred position (the same path empty-selector steps
use) instead of unmounting the highlight root keeps the slot — including
GuidedTourStep's Next/Finish controls — visible, so users can always
advance or finish the tour.

Author: silvestrid

changelog/entries/unreleased/bug/fixes_a_guided_tour_crash_when_the_highlighted_element_is_no.json

@@ -0,0 +1,9 @@
+{
+    "type": "bug",
+    "message": "Fixes a guided tour crash when the highlighted element is not on the page",
+    "issue_origin": "github",
+    "issue_number": 5377,
+    "domain": "core",
+    "bullet_points": [],
+    "created_at": "2026-05-15"
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="selector !== null"
+    v-if="visible"
     class="highlight"
     :style="{
       left: `${position.left || '0px'}`,
@@ -45,6 +45,11 @@ export default {
       },
     }
   },
+  computed: {
+    visible() {
+      return this.selector !== null
+    },
+  },
   mounted() {
     const parent = this._getParent()
     this.resizeObserver = new ResizeObserver(() => {
@@ -110,15 +115,18 @@ export default {
         return
       }
 
-      if (this.selector.length > 0) {
-        const elements = this.getElements(this.selector)
+      const elements =
+        this.selector.length > 0 ? this.getElements(this.selector) : []
+
+      if (elements.length > 0) {
         const parentRect = this._getParent().getBoundingClientRect()
         const elementRect = getCombinedBoundingClientRect(elements)
         position.top = elementRect.top - parentRect.top - this.padding + 'px'
         position.left = elementRect.left - parentRect.left - this.padding + 'px'
         position.width = elementRect.width + this.padding * 2 + 'px'
         position.height = elementRect.height + this.padding * 2 + 'px'
       } else {
+        // Fall back to centered when no targets match
         position.top = '50%'
         position.left = '50%'
       }