Make it more niece

js/dlg/message-box.css

@@ -17,8 +17,6 @@
 }
 
 #message-box > div {
-  top: 3rem;
-  right: 3rem;
   min-width: 10rem;
   max-width: 50vw;
   min-height: 5rem;
@@ -32,6 +30,11 @@
   -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

@@ -69,7 +69,7 @@ messageBox.show = async ({
   });
 
   function initOwnListeners() {
-    let dragging = false;
+    let listening = false;
     let clickX, clickY;
     let positionX, positionY;
     messageBox.listeners = {
@@ -107,26 +107,44 @@ messageBox.show = async ({
         scrollTo(messageBox._blockScroll.x, messageBox._blockScroll.y);
       },
       mouseDown(event) {
+        if (event.button !== 0) {
+          return;
+        }
+        if (!listening) {
+          window.on('mouseup', messageBox.listeners.mouseUp, {passive: true});
+          window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
+          listening = true;
+        }
         clickX = event.clientX;
         clickY = event.clientY;
 
         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;
-        dragging = true;
+        }
       },
-      mouseUp() {
-        dragging = false;
+      mouseUp(event) {
+        if (event.button !== 0) {
+          return;
+        }
+        window.off('mouseup', messageBox.listeners.mouseUp);
+        window.off('mousemove', messageBox.listeners.mouseMove);
+        listening = false;
       },
       mouseMove(event) {
-        if (dragging) {
         const x = positionX + event.clientX - clickX;
         const y = positionY + event.clientY - clickY;
 
         const element = $('#message-box > div');
-          element.style.left = x + 'px';
-          element.style.top = y + 'px';
-        }
+        element.style.transform = `translateX(${x}px) translateY(${y}px)`;
+        element.classList.add('dragged');
       },
     };
   }
@@ -175,15 +193,10 @@ messageBox.show = async ({
       window.on('scroll', messageBox.listeners.scroll, {passive: false});
     }
     window.on('keydown', messageBox.listeners.key, true);
-    window.on('mouseup', messageBox.listeners.mouseUp, {passive: true});
-    window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
   }
 
   function bindElementLiseners() {
-    const messageBoxHeader = $('#message-box-title');
-    if (messageBoxHeader) {
-      messageBoxHeader.on('mousedown', messageBox.listeners.mouseDown, {passive: true});
-    }
+    $('#message-box-title').on('mousedown', messageBox.listeners.mouseDown, {passive: true});
   }
 
   function unbindGlobalListeners() {
@@ -194,7 +207,7 @@ messageBox.show = async ({
 
     const messageBoxHeader = $('#message-box-title');
     if (messageBoxHeader) {
-      messageBoxHeader.on('mousedown', messageBox.listeners.mouseDown);
+      messageBoxHeader.off('mousedown', messageBox.listeners.mouseDown);
     }
   }