From 6385c7fcb325cfacad3c1d8e34a97f5f5b8e82f5 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 8 Mar 2018 16:34:19 -0500
Subject: [PATCH] UX: Don't let topic progress widget dangle when preview is
 disabled

---
 .../components/topic-progress.js.es6          | 27 ++++++++++++-------
 .../stylesheets/common/topic-timeline.scss    |  2 +-
 app/assets/stylesheets/desktop/topic.scss     |  3 +--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/topic-progress.js.es6 b/app/assets/javascripts/discourse/components/topic-progress.js.es6
index a3f09e3182a..99f485ef1ba 100644
--- a/app/assets/javascripts/discourse/components/topic-progress.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-progress.js.es6
@@ -116,20 +116,29 @@ export default Ember.Component.extend({
   },
 
   _dock() {
-    const maximumOffset = $('#topic-bottom').offset(),
-          composerHeight = $('#reply-control').height() || 0,
-          $topicProgressWrapper = this.$(),
-          offset = window.pageYOffset || $('html').scrollTop();
+    let maximumOffset = $('#topic-bottom').offset();
+    let composerHeight = $('#reply-control').height() || 0;
+    let $topicProgressWrapper = this.$();
+    let offset = window.pageYOffset || $('html').scrollTop();
 
     if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) {
       return;
     }
 
+    // Right position
+    let $replyArea = $('#reply-control .reply-area');
+    if ($replyArea && $replyArea.length) {
+      let rightPos = $replyArea.offset().left;
+      $topicProgressWrapper.css('right', `${rightPos}px`);
+    } else {
+      $topicProgressWrapper.css('right', `1em`);
+    }
+
     let isDocked = false;
     if (maximumOffset) {
-      const threshold = maximumOffset.top;
-      const windowHeight = $(window).height();
-      const headerHeight = $('header').outerHeight(true);
+      let threshold = maximumOffset.top;
+      let windowHeight = $(window).height();
+      let headerHeight = $('header').outerHeight(true);
 
       if (this.capabilities.isIOS) {
         isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight);
@@ -138,12 +147,12 @@ export default Ember.Component.extend({
       }
     }
 
-    const dockPos = $(document).height() - $('#topic-bottom').offset().top;
+    let dockPos = $(document).height() - $('#topic-bottom').offset().top;
     if (composerHeight > 0) {
       if (isDocked) {
         $topicProgressWrapper.css('bottom', dockPos);
       } else {
-        const height = composerHeight + "px";
+        let height = composerHeight + "px";
         if ($topicProgressWrapper.css('bottom') !== height) {
           $topicProgressWrapper.css('bottom', height);
         }
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index f5e77393ca2..e854a9c8b11 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -34,7 +34,7 @@
     transition: max-height 0.4s ease-out;
     @media screen and (max-height: 425px) {
       max-height: 75vh;
-    }      
+    }
     .topic-timeline {
       .timeline-footer-controls {
         display: inherit;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index db173a36810..b4387dcfca4 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -76,8 +76,7 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  right: 50%;
-  width: 0;
+  right: 1em;
   bottom: 0;
   z-index: z("timeline");
   &.docked {