From 76ba7788c032fe5316a9c6c3c1177a2edf23c1ba Mon Sep 17 00:00:00 2001
From: Aljaz Grilc <aljaz.grilc@amebis.si>
Date: Fri, 24 May 2024 10:13:12 +0200
Subject: [PATCH] Resolve overflow on X-axis issue and reimplement onScroll
 event listener

---
 service2.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/service2.js b/service2.js
index 3e4a50d..0cf2d42 100644
--- a/service2.js
+++ b/service2.js
@@ -8,6 +8,10 @@
  */
 let besServices = []
 
+window.addEventListener('scroll', () =>
+  besServices.forEach(service => service.onScroll())
+)
+
 // TODO: Window resize may cause host element(s) to move. That needs correction panel and status icon
 // repositioning. Also, should any parent element of our service host element move, we should reposition
 // correction panel and status icon. How to do this? Alas there is no PlacementObserver to monitor host
@@ -262,20 +266,14 @@ class BesService {
    */
   setCorrectionPanelSize() {
     const styles = window.getComputedStyle(this.hostElement)
-    const totalWidth =
-      parseFloat(styles.paddingLeft) +
-      parseFloat(styles.marginLeft) +
-      parseFloat(styles.width) +
-      parseFloat(styles.marginRight) +
-      parseFloat(styles.paddingRight)
     const totalHeight =
       parseFloat(styles.paddingTop) +
       parseFloat(styles.marginTop) +
       parseFloat(styles.height) +
       parseFloat(styles.marginBottom) +
       parseFloat(styles.paddingBottom)
-    this.correctionPanel.style.width = `${totalWidth}px`
     this.correctionPanel.style.height = `${totalHeight}px`
+    this.correctionPanel.style.width = styles.width
     this.correctionPanel.style.marginLeft = styles.marginLeft
     this.correctionPanel.style.marginRight = styles.marginRight
     this.correctionPanel.style.paddingLeft = styles.paddingLeft