From 78d87a79eb5a2497d008f2550568e4a8e794a188 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Fri, 31 Mar 2017 16:47:49 +0800
Subject: [PATCH] UX: Improve `.modal-header` style on mobile.

---
 .../javascripts/discourse/templates/modal.hbs   |  7 +++++--
 app/assets/stylesheets/desktop/modal.scss       |  9 +++++++--
 app/assets/stylesheets/mobile/modal.scss        | 17 +++++++++--------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/modal.hbs b/app/assets/javascripts/discourse/templates/modal.hbs
index 3d778a0476e..5783f544aad 100644
--- a/app/assets/javascripts/discourse/templates/modal.hbs
+++ b/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|}}
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index fd82268119a..cf751ad717f 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/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%));
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index f94a9facd54..8b2498f1bc5 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/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;
 }