UX: Updating the edit post title layout

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

@@ -12,32 +12,33 @@
     {{#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}}
-          {{/if}}
-
-          {{#if canEditTags}}
-            {{tag-chooser tags=buffered.tags categoryId=buffered.category_id}}
-          {{/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"}}
-
-            {{#if canRemoveTopicFeaturedLink}}
-              <a href {{action "removeFeaturedLink"}} class="remove-featured-link" title="{{i18n "composer.remove_featured_link"}}">
-                {{d-icon "times-circle"}}
-                {{featuredLinkDomain}}
-              </a>
+            {{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}}
             {{/if}}
+
+            {{#if canEditTags}}
+              {{tag-chooser tags=buffered.tags categoryId=buffered.category_id}}
+            {{/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"}}
+
+              {{#if canRemoveTopicFeaturedLink}}
+                <a href {{action "removeFeaturedLink"}} class="remove-featured-link" title="{{i18n "composer.remove_featured_link"}}">
+                  {{d-icon "times-circle"}}
+                  {{featuredLinkDomain}}
+                </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

@@ -1,8 +1,8 @@
 // DO NOT MODIFY
 // TODO: remove when all select2 instances are gone
 .select2-results .select2-highlighted {
-    background: $highlight-medium;
-    color: $primary;
+  background: $highlight-medium;
+  color: $primary;
 }
 
 .select2-drop {
@@ -36,9 +36,8 @@
 }
 
 .select2-container {
-  border: 1px solid $primary-low;
   min-width: 200px;
-
+  
   &.select2-dropdown-open {
     border: 0;
     margin-bottom: 2px;
@@ -82,4 +81,4 @@
 .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit {
   background: $secondary;
   color: $primary;
-}
+}

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/mobile/topic.scss

@@ -221,4 +221,4 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
   .btn.pull-right {
     margin-right: 0;
   }
-}
+}

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;
 }