From 56468582ee3a7fa84c98110c1cb277f49b258396 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 31 Aug 2017 15:08:09 +0200
Subject: [PATCH] FIX: visual regressions on title-wrapper

---
 .../javascripts/discourse/templates/topic.hbs     |  9 +++++----
 app/assets/stylesheets/common/base/tagging.scss   |  5 +++++
 app/assets/stylesheets/common/base/topic.scss     | 15 ++-------------
 app/assets/stylesheets/desktop/topic.scss         | 12 +++---------
 app/assets/stylesheets/mobile/topic.scss          | 12 +++++++++++-
 5 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index e882f773ea7..1489bf621df 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -18,19 +18,20 @@
 
           {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
           {{#if showCategoryChooser}}
+            <br>
             {{category-select-box class="small" value=buffered.category_id}}
           {{/if}}
 
           {{#if canEditTags}}
+            <br>
             {{tag-chooser tags=buffered.tags categoryId=buffered.category_id}}
           {{/if}}
 
           {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}}
 
-          <div class="actions">
-            {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
-            {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
-          </div>
+          <br>
+          {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
+          {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
         {{else}}
           <h1>
             {{#unless model.is_warning}}
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 3934d65c366..be2a28cc3f3 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -169,6 +169,7 @@ header .discourse-tag {color: $tag-color }
 }
 
 .tag-chooser {
+  width: 100%;
   margin: 5px 0;
   ul.select2-choices {
     max-height: 40px;
@@ -176,6 +177,10 @@ header .discourse-tag {color: $tag-color }
   }
 }
 
+.title-wrapper .tag-chooser {
+  width: 500px;
+}
+
 .admin-tag {
   position: relative;
   float: right;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index d8c52711ae4..c4d1a7a0e3e 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -48,20 +48,9 @@
 
 #topic-title {
   .title-wrapper {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    max-width: 450px;
+    float: left;
+    width: 90%;
 
-    #edit-title, .tag-chooser, .category-select-box {
-      flex: 1;
-      width: auto;
-    }
-
-    #edit-title {
-      margin-bottom: 5px;
-
-    }
     .btn-small {
       margin: 0 6px 0 0;
     }
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index edf556150ad..8448400be78 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -21,16 +21,14 @@
   padding-top: 14px;
   margin-bottom: 10px;
 
-  .tag-chooser {
-    width: 100%;
-    max-width: 450px;
-  }
-  
   .star {
     font-size: 1.429em;
     margin-top: 6px;
     margin-right: 6px;
   }
+  #edit-title, .category-select-box {
+    width: 500px;
+  }
   h1 {
     font-size: 1.8em;
     line-height: 1.2em;
@@ -44,10 +42,6 @@
     vertical-align: middle;
   }
   .private-message-glyph { display: none; }
-  .actions {
-    flex: 1;
-    align-items: center;
-  }
 }
 
 .private-message-glyph {
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 533a8283bba..da8a3357fb8 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -180,14 +180,24 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
 
 // inline editing of title on mobile
 .title-wrapper {
-  #edit-title {
+  input#edit-title {
+    width: 95%;
     padding: 5px;
+    box-sizing: border-box;
   }
 
   .btn-small {
     padding: 8px 12px;
     margin: 6px 6px 0 0;
   }
+  .select2-container {
+    margin-top: 8px;
+    width: 95% !important;
+  }
+  .category-select-box {
+    margin-top: 8px;
+    width: 95%;
+  }
 }
 
 // make mobile timeline top and bottom dates easier to select