From 71db6c7481af00ec1458b8ecc64ebecfa79fed4b Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Tue, 5 Dec 2017 04:30:07 +0800
Subject: [PATCH] Fix: calculate size dynamically

---
 msgbox/msgbox.css | 13 ++++++++++---
 msgbox/msgbox.js  | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index a46cec8e..1ababb94 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -133,16 +133,23 @@
 }
 
 /* popup */
-#stylus-popup #message-box {
+#message-box.stylus-popup {
   margin: 0;
   align-items: center;
   justify-content: center;
 }
-#stylus-popup #message-box > div {
-  max-width: 90vh;
+#message-box.stylus-popup > div {
+  max-width: 90vw;
   top: auto;
   right: auto;
 }
+#message-box.calculate-size {
+  white-space: nowrap;
+}
+#message-box.calculate-size > div {
+  max-width: none;
+  max-height: none;
+}
 
 @keyframes fadein {
   from {
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index 5dd9face..cacc3e11 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -11,13 +11,20 @@ function messageBox({
   initOwnListeners();
   bindGlobalListeners();
   createElement();
+  document.body.appendChild(messageBox.element);
   if (location.href.includes('popup.html')) {
+    messageBox.element.classList.add('stylus-popup');
+
+    // calculate size
+    messageBox.element.classList.add('calculate-size');
+    const {offsetWidth, offsetHeight} = messageBox.element.children[0];
+    messageBox.element.classList.remove('calculate-size');
+
     messageBox.bodyWidth = document.body.style.width;
     messageBox.bodyHeight = document.body.style.height;
-    document.body.style.width = '400px';
-    document.body.style.height = '600px';
+    document.body.style.width = `${offsetWidth / 0.9}px`;
+    document.body.style.height = `${offsetHeight / 0.9}px`;
   }
-  document.body.appendChild(messageBox.element);
   if (onshow) {
     onshow(messageBox.element);
   }