UX: Show the selected posts controls at the bottom of mobile topics too

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -34,6 +34,11 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
     }
   }.observes('model.title', 'category'),
 
+  @computed('site.mobileView', 'model.posts_count')
+  showSelectedPostsAtBottom(mobileView, postsCount) {
+    return mobileView && (postsCount > 3);
+  },
+
   @computed('model.postStream.posts')
   postsToRender() {
     return this.capabilities.isAndroid ? this.get('model.postStream.posts')

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

@@ -130,6 +130,10 @@
               </div>
             {{/if}}
 
+            {{#if showSelectedPostsAtBottom}}
+              {{view "selected-posts"}}
+            {{/if}}
+
             {{plugin-outlet "topic-above-suggested"}}
 
             {{#if model.details.suggested_topics.length}}

app/assets/javascripts/discourse/views/selected-posts.js.es6

@@ -1,9 +1,4 @@
 export default Ember.View.extend({
-  elementId: 'selected-posts',
+  classNameBindings: ['controller.multiSelect::hidden', ':selected-posts'],
-  classNameBindings: ['customVisibility'],
   templateName: "selected-posts",
-
-  customVisibility: function() {
-    if (!this.get('controller.multiSelect')) return 'hidden';
-  }.property('controller.multiSelect')
 });

app/assets/stylesheets/desktop/topic-post.scss

@@ -805,7 +805,7 @@ $topic-avatar-width: 45px;
   clear: both;
 }
 
-#selected-posts {
+.selected-posts {
   width: 200px;
   position: fixed;
   z-index: 1000;

app/assets/stylesheets/mobile/topic-post.scss

@@ -417,9 +417,9 @@ iframe {
   right: 4px;
 }
 
-#selected-posts {
+.selected-posts {
   width: 97%;
-  padding-left: 3%;
+  padding: 0.1em 0.7em;
   background-color: srgb-scale($tertiary, $secondary, 15%);
   .btn {
     margin-bottom: 10px;