Fix calculation code

js/dlg/message-box.css

@@ -17,6 +17,8 @@
 }
 
 #message-box > div {
+  top: 3rem;
+  right: 3rem;
   min-width: 10rem;
   max-width: 50vw;
   min-height: 5rem;
@@ -30,11 +32,6 @@
   -moz-user-select: text;
 }
 
-#message-box > div:not(.dragged) {
-  top: 3rem;
-  right: 3rem;
-}
-
 #message-box.fadeout {
   animation: fadeout .25s ease-in-out;
 }

js/dlg/message-box.js

@@ -70,8 +70,9 @@ messageBox.show = async ({
 
   function initOwnListeners() {
     let listening = false;
+    let offsetX = 0;
+    let offsetY = 0;
     let clickX, clickY;
-    let positionX, positionY;
     messageBox.listeners = {
       closeIcon() {
         resolveWith({button: -1});
@@ -115,20 +116,8 @@ messageBox.show = async ({
           window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
           listening = true;
         }
-        clickX = event.clientX;
+        clickX = event.clientX - offsetX;
-        clickY = event.clientY;
+        clickY = event.clientY - offsetY;
-
-        const element = $('#message-box > div');
-        // Due to how transform and translate work we cannot rely
-        // on the offsets and must fallback to getBoundingClientRect
-        if (element.classList.contains('dragged')) {
-          const bounds = element.getBoundingClientRect();
-          positionX = bounds.left;
-          positionY = bounds.top;
-        } else {
-          positionX = element.offsetLeft;
-          positionY = element.offsetTop;
-        }
       },
       mouseUp(event) {
         if (event.button !== 0) {
@@ -139,12 +128,14 @@ messageBox.show = async ({
         listening = false;
       },
       mouseMove(event) {
-        const x = positionX + event.clientX - clickX;
+        const x = event.clientX - clickX;
-        const y = positionY + event.clientY - clickY;
+        const y = event.clientY - clickY;
+
+        offsetX = x;
+        offsetY = y;
 
         const element = $('#message-box > div');
         element.style.transform = `translateX(${x}px) translateY(${y}px)`;
-        element.classList.add('dragged');
       },
     };
   }