FIX: minor css tweaks to title-wrapper

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

@@ -18,20 +18,19 @@
 
           {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
           {{#if showCategoryChooser}}
-            <br>
-            {{category-select-box width=350 value=buffered.category_id}}
+            {{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)}}
 
-          <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"}}
+          <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>
         {{else}}
           <h1>
             {{#unless model.is_warning}}

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

@@ -169,7 +169,6 @@ header .discourse-tag {color: $tag-color }
 }
 
 .tag-chooser {
-  width: 100%;
   margin: 5px 0;
   ul.select2-choices {
     max-height: 40px;
@@ -177,10 +176,6 @@ header .discourse-tag {color: $tag-color }
   }
 }
 
-.title-wrapper .tag-chooser {
-  width: 500px;
-}
-
 .admin-tag {
   position: relative;
   float: right;

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

@@ -48,14 +48,25 @@
 
 #topic-title {
   .title-wrapper {
-    float: left;
-    width: 90%;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    max-width: 450px;
+
+    #edit-title, .tag-chooser, .category-select-box {
+      flex: 1;
+      width: auto;
+    }
+
+    #edit-title {
+      margin-bottom: 5px;
+
+    }
     .btn-small {
       margin: 0 6px 0 0;
     }
 
     .badge-wrapper {
-      float: left;
       margin-right: 12px;
     }
 

app/assets/stylesheets/desktop/topic.scss

@@ -20,29 +20,34 @@
   z-index: 1000;
   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 { width: 500px; }
   h1 {
     font-size: 1.8em;
     line-height: 1.2em;
     overflow: hidden;
     a {color: $primary;}
   }
-
-
   .topic-statuses {
     margin-top: -2px;
   }
   .select2-container {
     vertical-align: middle;
-    margin-right: 5px;
-    margin-bottom: 2px;
   }
   .private-message-glyph { display: none; }
+  .actions {
+    flex: 1;
+    align-items: center;
+  }
 }
 
 .private-message-glyph {
@@ -89,7 +94,7 @@
 }
 
 #topic-progress-expanded {
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
   padding: 5px;
   background: $secondary;
 

app/assets/stylesheets/mobile/topic.scss

@@ -180,18 +180,14 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
 
 // inline editing of title on mobile
 .title-wrapper {
-  input#edit-title {
-    width: 95%;
+  #edit-title {
     padding: 5px;
   }
+
   .btn-small {
     padding: 8px 12px;
     margin: 6px 6px 0 0;
   }
-  .select2-container {
-    margin-top: 8px;
-    width: 95% !important;
-  }
 }
 
 // make mobile timeline top and bottom dates easier to select