Fix scrollIntoView behavior and improve popup positioning #4

service.js

@@ -1200,17 +1200,25 @@ class BesService {
     service.activeMatchIndex = next
     const { el, match } = service.sortedMatches[next]
 
-    // Not the cleanest solution, but it is good enough for now
-    el.scrollIntoView({ behavior: 'instant' })
+    if (el && typeof el.scrollIntoView === 'function') {
+      el.scrollIntoView({ behavior: 'instant', block: 'center' })
+    }
+    // Not the cleanest solution to setTimeout()
     setTimeout(() => {
       service.dismissPopup()
       const popup = document.querySelector('bes-popup-el')
       BesPopup.clearReplacements()
       popup.setContent(el, match, service, service.isContentEditable())
       service.highlightMistake(match)
-      match.highlights.forEach(el => {
-        const clientY = `${el.y + 150}`
-        popup.show(el.x, clientY, service)
+      const containerRect = service.hostElement.getBoundingClientRect()
+      match.highlights.forEach(rect => {
+        const clientX = rect.x + containerRect.left
+        const clientY =
+          rect.y +
+          containerRect.top +
+          rect.height -
+          service.hostElement.scrollTop
+        popup.show(clientX, clientY, service)
       })
     }, 150)
   }