diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index 6acb195d121..e882f773ea7 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/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}}
-
- {{category-select-box width=350 value=buffered.category_id}}
+ {{category-select-box 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)}}
-
- {{d-button action="finishedEditingTopic" class="btn-primary btn-small submit-edit" icon="check"}}
- {{d-button action="cancelEditingTopic" class="btn-small cancel-edit" icon="times"}}
+
+ {{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}}
{{#unless model.is_warning}}
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index be2a28cc3f3..3934d65c366 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/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;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 5a6b735fc92..d8c52711ae4 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/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;
}
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 2b30adb33aa..edf556150ad 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/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;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index f52b3ce0fc8..533a8283bba 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/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