UX: Prevent topic progress bar from overlapping (#12780)

app/assets/javascripts/discourse/app/components/topic-progress.js

@@ -151,10 +151,7 @@ export default Component.extend({
 
     const $html = $("html");
     const offset = window.pageYOffset || $html.scrollTop();
-    const progressHeight = this.site.mobileView
-      ? 0
-      : $("#topic-progress").outerHeight();
-    const maximumOffset = $("#topic-bottom").offset().top + progressHeight;
+    const maximumOffset = $("#topic-bottom").offset().top;
     const windowHeight = $(window).height();
     let composerHeight = $("#reply-control").height() || 0;
     const isDocked = offset >= maximumOffset - windowHeight + composerHeight;

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

@@ -62,6 +62,13 @@
   }
 }
 
+@media screen and (max-width: 924px) {
+  .post-stream {
+    // make space for the topic progress bar to dock
+    padding-bottom: 2em;
+  }
+}
+
 .progress-back-container {
   z-index: z("dropdown");
   margin-right: 0;
@@ -80,6 +87,7 @@
 
 #topic-progress-wrapper {
   display: flex;
+  right: 9px; // 8px padding on #main-outlet + 1px right border
   .topic-admin-menu-button-container {
     display: flex;
     > span {

app/assets/stylesheets/desktop/topic.scss

@@ -85,7 +85,6 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  right: 2em;
   bottom: 0;
   left: 0;
   margin: 0 auto;

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

@@ -14,10 +14,6 @@
   padding: 15px 0 8px 0;
 }
 
-.post-stream {
-  padding-bottom: 3em;
-}
-
 span.badge-posts {
   margin-right: 5px;
 }

app/assets/stylesheets/mobile/topic.scss

@@ -43,7 +43,7 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  right: 1em;
+  right: 10px; // match 10px padding on .wrap
   bottom: 0;
   z-index: z("timeline");
   &:not(.docked) {