FIX: Modal dialogs now truely center and work at all screen sizes (mobile)

app/assets/javascripts/discourse/templates/modal/modal.js.handlebars

@@ -1,3 +1,7 @@
+<div id='modal-outer-container'>
+  <div id='modal-middle-container'>
+    <div id='modal-inner-container'>
+
       <div class="modal-header">
         <a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a>
         <h3>{{title}}</h3>
@@ -13,4 +17,6 @@
         </div>
       {{/each}}
 
-
+    </div>
+  </div>
+</div>

app/assets/stylesheets/application/modal.css.scss

@@ -38,14 +38,18 @@
   filter: alpha(opacity=80);
 }
 
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 1050;
-  overflow: auto;
-  width: 610px;
-  margin: -250px 0 0 -305px;
+#modal-outer-container {
+  display:table;
+  width:100%;
+  height:100%;
+}
+#modal-middle-container {
+  display:table-cell;
+  vertical-align: middle;
+}
+#modal-inner-container {
+  max-width: 610px;
+  margin: 0 auto;
   background-color: #ffffff;
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -56,6 +60,14 @@
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   background-clip: padding-box;
 }
+.modal {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  overflow: auto;
+}
 .modal.fade {
   -webkit-transition: opacity .3s linear, top .3s ease-out;
   transition: opacity .3s linear, top .3s ease-out;