From 41d683323f1d383c155f6658f90a354f58fe6ad5 Mon Sep 17 00:00:00 2001
From: Aron Demeter <66035744+dem4ron@users.noreply.github.com>
Date: Tue, 21 Jan 2025 19:37:11 +0100
Subject: [PATCH] Attach tooltip x to panel lhs location (#7357)

---
 .../information-widget.ts                     | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts b/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
index 06858a57d7..73f830a418 100644
--- a/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
+++ b/app/javascript/components/bootcamp/SolveExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts
@@ -18,7 +18,6 @@ export class InformationWidget extends WidgetType {
   private observer: MutationObserver | null = null
   private autoUpdateCleanup: (() => void) | null = null
   private scrollContainer: HTMLElement | null = null
-  private previousPosition: { x: number; y: number } | null = null
 
   constructor(
     private readonly tooltipHtml: string,
@@ -128,14 +127,8 @@ export class InformationWidget extends WidgetType {
         shift({ padding: 0, boundary: (editor as Boundary) ?? undefined }),
         arrow({ element: this.arrowElement! }),
       ],
-    }).then(({ x, y, middlewareData }) => {
-      if (x !== 0) {
-        // ||= - initialise if doesn't exist
-        this.previousPosition ||= { x, y }
-      } else if (this.previousPosition?.x) {
-        x = this.previousPosition.x
-      }
-
+    }).then(({ y, middlewareData }) => {
+      const x = localStorage.getItem('solve-exercise-page-lhs')
       const { arrow } = middlewareData
       if (!this.tooltip) return
       Object.assign(this.tooltip.style, {
@@ -179,20 +172,35 @@ export class InformationWidget extends WidgetType {
     this.observer.observe(document.body, { childList: true, subtree: true })
   }
 
+  private handleScroll?: EventListener
+  private handleStorage?: (e: StorageEvent) => void
+
   private setupScrollListener() {
     const scrollContainer = document.querySelector('.cm-scroller')
     if (!scrollContainer) {
       return
     }
-    scrollContainer.addEventListener('scroll', () => {
-      this.positionTooltip()
-    })
+
+    this.handleScroll = this.positionTooltip.bind(this)
+    this.handleStorage = (e: StorageEvent) => {
+      if (e.key === 'solve-exercise-page-lhs') {
+        this.positionTooltip()
+      }
+    }
+
+    scrollContainer.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('storage', this.handleStorage)
+
     this.scrollContainer = scrollContainer as HTMLElement
   }
 
   private cleanup() {
-    if (this.scrollContainer) {
-      this.scrollContainer.removeEventListener('scroll', this.positionTooltip)
+    if (this.scrollContainer && this.handleScroll) {
+      this.scrollContainer.removeEventListener('scroll', this.handleScroll)
+    }
+
+    if (this.handleStorage) {
+      window.removeEventListener('storage', this.handleStorage)
     }
 
     if (this.autoUpdateCleanup) {