UX: Updating the edit post title layout

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

@@ -12,10 +12,10 @@
     {{#if model.postStream.firstPostPresent}}
       {{#topic-title cancelled="cancelEditingTopic" save="finishedEditingTopic" model=model}}
         {{#if editingTopic}}
+          <div class="edit-topic-title">
           {{#if model.isPrivateMessage}}
             <span class="private-message-glyph">{{d-icon "envelope"}}</span>
           {{/if}}
-
             {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
             {{#if showCategoryChooser}}
               {{category-chooser class="small" value=buffered.category_id}}
@@ -26,7 +26,6 @@
             {{/if}}
 
             {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}}
-
             <div class="edit-controls">
               {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
               {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
@@ -38,6 +37,8 @@
                 </a>
               {{/if}}
             </div>
+          </div>
+
         {{else}}
           <h1>
             {{#unless model.is_warning}}

app/assets/stylesheets/common/base/topic.scss

@@ -73,8 +73,46 @@
   }
 
   a.edit-topic i { font-size: 0.8em; }
+
+  .edit-topic-title {
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    max-width: 758px;
+    #edit-title {
+      flex: 1 1 auto;
+    }
+    .private-message-glyph {
+      margin: 5px 5px 0 0;
+    }
+    .category-chooser, .tag-chooser {
+      flex: 1 1 49%;
+      margin: 0 0 9px 0;
+      @media all and (max-width: 500px) {
+        flex: 1 1 100%;        
+      }
+        
+    }
+    .tag-chooser {
+      margin-left: 2%;
+      @media all and (max-width: 500px) {
+        margin-left: 0;
+      }
+    }
+  }
 }
 
+.private_message {
+  #topic-title {
+    .edit-topic-title {
+      #edit-title {
+        width: calc(100% - 50px);
+      }
+    }
+  }
+}
+
+
 .topic-title-outlet {
   clear: both;
 }

app/assets/stylesheets/common/select-kit/legacy-combo-box.scss

@@ -36,7 +36,6 @@
 }
 
 .select2-container {
-  border: 1px solid $primary-low;
   min-width: 200px;
   
   &.select2-dropdown-open {

app/assets/stylesheets/desktop/topic.scss

@@ -53,7 +53,7 @@
 .private-message-glyph {
   color: dark-light-choose($primary-low-mid, $secondary-high);
   float: left;
-  margin: 0 5px 0 0;
+  margin-right: 5px;
 }
 .private_message #topic-title .private-message-glyph { display: inline; }
 

app/assets/stylesheets/vendor/select2.scss

@@ -406,7 +406,7 @@ disabled look for disabled choices in the results dropdown
     margin: 0;
     padding: 0 5px 0 0;
     position: relative;
-    border: 1px solid #aaa;
+    border: 1px solid $primary-medium;
     cursor: text;
     overflow: hidden;
 }