From 4758144f6a48420f8687c0a19473055ae0375036 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Tue, 15 Sep 2015 15:35:58 +1000
Subject: [PATCH] FIX: avoid horizontal scrollbar on narrow windows

---
 .../views/topic-footer-buttons.js.es6         | 43 +++++++++++++------
 app/assets/stylesheets/desktop/topic.scss     | 36 +++++++---------
 2 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6 b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6
index 1598eb1ae..3b70d394d 100644
--- a/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6
+++ b/app/assets/javascripts/discourse/views/topic-footer-buttons.js.es6
@@ -9,6 +9,32 @@ import PinnedButton from 'discourse/components/pinned-button';
 import TopicNotificationsButton from 'discourse/components/topic-notifications-button';
 import DiscourseContainerView from 'discourse/views/container';
 
+const MainPanel = Discourse.ContainerView.extend({
+  elementId: 'topic-footer-main-buttons',
+  topicBinding: 'controller.content',
+
+  init() {
+    this._super();
+
+    const topic = this.get('topic');
+    if (!topic.get('isPrivateMessage')) {
+      // We hide some controls from private messages
+      if (this.get('topic.details.can_invite_to')) {
+        this.attachViewClass(InviteReplyButton);
+      }
+      this.attachViewClass(BookmarkButton);
+      this.attachViewClass(ShareButton);
+      if (this.get('topic.details.can_flag_topic')) {
+        this.attachViewClass(FlagTopicButton);
+      }
+    }
+    if (this.get('topic.details.can_create_post')) {
+      this.attachViewClass(ReplyButton);
+    }
+  }
+
+});
+
 export default DiscourseContainerView.extend({
   elementId: 'topic-footer-buttons',
   topicBinding: 'controller.content',
@@ -26,20 +52,9 @@ export default DiscourseContainerView.extend({
       if (Discourse.User.currentProp("staff")) {
         this.attachViewClass(TopicAdminMenuButton);
       }
-      if (!topic.get('isPrivateMessage')) {
-        // We hide some controls from private messages
-        if (this.get('topic.details.can_invite_to')) {
-          this.attachViewClass(InviteReplyButton);
-        }
-        this.attachViewClass(BookmarkButton);
-        this.attachViewClass(ShareButton);
-        if (this.get('topic.details.can_flag_topic')) {
-          this.attachViewClass(FlagTopicButton);
-        }
-      }
-      if (this.get('topic.details.can_create_post')) {
-        this.attachViewClass(ReplyButton);
-      }
+
+      this.attachViewWithArgs(viewArgs, MainPanel);
+
       this.attachViewWithArgs(viewArgs, PinnedButton);
       this.attachViewWithArgs(viewArgs, TopicNotificationsButton);
 
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index f63cadd22..c3929fd25 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -228,40 +228,36 @@ a:hover.reply-new {
 }
 
 @media all
-and (max-width : 940px) {
+and (max-width : 1000px) {
 
   #topic-progress, #topic-progress-expanded {
-    left: 295px;
+      right: 0;
+      left: 0;
     }
-}
-
-
-@media all
-and (max-width : 870px) {
-
-  #topic-progress, #topic-progress-expanded {
-    left: 210px;
-    }
-
-}
-
-
-@media all
-and (max-width : 724px) {
 
   #topic-progress-wrapper {
-    right: 0;
-    #topic-progress, #topic-progress-expanded { left: auto; right: 145px;  }
+    right: 160px;
   }
 
+  #topic-progress-wrapper.docked {
+    right: 152px;
+  }
+
+  #topic-footer-main-buttons {
+    max-width: 70%;
+  }
 }
 
+
 @media all
 and (max-width : 485px) {
 
   #topic-progress-wrapper.docked {
     display: none;
-    }
+  }
 
 
+  #topic-footer-main-buttons {
+    max-width: 100%;
+  }
 }