UX: Improve `.modal-header` style on mobile.

app/assets/javascripts/discourse/templates/modal.hbs

@@ -3,10 +3,13 @@
     <div class="modal-middle-container">
       <div class="modal-inner-container">
         <div class="modal-header">
-          <a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
           <h3>{{title}}</h3>
-          <div class="clearfix"></div>
+
+          <div class='modal-close'>
+            <a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
+          </div>
         </div>
+
         <div id='modal-alert'></div>
         {{outlet "modalBody"}}
         {{#each errors as |error|}}

app/assets/stylesheets/desktop/modal.scss

@@ -46,15 +46,20 @@
   margin-left: -1px;
 }
 
+.modal-close {
+  display: inline-block;
+  float: right;
+  margin: 7px;
+}
+
 .modal-header {
   h3 {
+    display: inline-block;;
     font-size: 1.429em;
     padding: 10px 15px 7px;
   }
-  .close {margin: 10px;}
 }
 .close {
-  float: right;
   font-size: 1.429em;
   text-decoration: none;
   color: dark-light-choose(scale-color($primary, $lightness: 35%), scale-color($secondary, $lightness: 65%));

app/assets/stylesheets/mobile/modal.scss

@@ -49,23 +49,24 @@
   margin-bottom: 5px;
 }
 
+.modal-close {
+  display: inline-block;
+  float: right;
+}
+
 .modal-header {
-  // we need tighter spacing on mobile for header
-  // this clearfix under the modal title h3 pushes it way down
-  .clearfix {
-    display:none;
-  }
+  padding: 10px 0px;
+
   h3 {
+    display: inline-block;
     font-size: 1.286em;
     padding-left: 15px;
-    margin-bottom: 5px;
+    margin: 0px;
   }
 }
 .close {
-  float: right;
   font-size: 1.714em;
   padding: 10px 15px 5px 5px;
-  margin: -15px 0 0 0;
   color: $primary;
 }