Improve popup size and position

memory-game.css

@@ -172,6 +172,7 @@
   background: #fff;
   padding: 1em;
   width: 20em;
+  max-width: 90%;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -182,7 +183,6 @@
 }
 .h5p-memory-game .h5p-memory-image {
   float: left;
-  margin: 0 1em 1em 0;
   border: 2px solid #d0d0d0;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -190,7 +190,11 @@
   background: #f0f0f0;
   width: 6.25em;
   height: 6.25em;
+  text-align: center;
 }
 .h5p-memory-game .h5p-row-break {
   clear: left;
 }
+.h5p-memory-game .h5p-memory-desc {
+  margin-left: 7em;
+}

memory-game.js

@@ -268,6 +268,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
       // We use font size to evenly scale all parts of the cards.
       $list.css('font-size', fontSize + 'px');
+      popup.setSize(fontSize);
       // due to rounding errors in browsers the margins may vary a bit…
     };
 

popup.js

@@ -39,6 +39,23 @@
         closed = undefined;
       }
     };
+
+    /**
+     * Sets popup size relative to the card size
+     * @param {number} fontSize
+     */
+    self.setSize = function (fontSize) {
+      // Set image size
+      $image[0].style.fontSize = fontSize + 'px';
+
+      // Determine card size
+      var cardSize = fontSize * 6.25; // From CSS
+
+      // Set popup size
+      $popup[0].style.minWidth = (cardSize * 2) + 'px';
+      $popup[0].style.minHeight = cardSize + 'px';
+      $desc[0].style.marginLeft = (cardSize + 20) + 'px';
+    };
   };
 
 })(H5P.MemoryGame, H5P.jQuery);