fix dialog css

skins/base/css/common.css

@@ -60,28 +60,41 @@ html {
     left: 0;
     width: 100%;
     height: 100%;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: center;
+    justify-content: center;
 }
 
 .mx_Dialog {
     background-color: #fff;
     color: #747474;
     text-align: center;
-    margin: auto;
-    max-width: 500px;
     z-index: 2010;
     font-weight: 300;
     font-size: 16px;
     position: relative;
     border-radius: 8px;
-    top: 200px;
+}
+
+.mx_ImageView {
+    margin: 6px;
+    /* hack: flexbox bug? */
+    margin-bottom: 4px;
 }
 
 .mx_Dialog_content {
-    margin: 35px;
+    margin: 24px;
 }
 
 .mx_Dialog_buttons {
-    padding-bottom: 35px;
+    padding-bottom: 24px;
 }
 
 .mx_Dialog button {

skins/base/views/atoms/ImageView.js

@@ -25,6 +25,9 @@ module.exports = React.createClass({
     mixins: [ImageViewController],
 
     render: function() {
+
+        // XXX: can't we just do max-width: 80%, max-height: 80% on the CSS?
+        
         var width = this.props.width || 500;
         var height = this.props.height || 500;