From e0d17c8d1997dc0c37a4cd587ca2d4944d06f894 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 21 Apr 2021 22:53:23 -0400
Subject: [PATCH] UX: Prevent topic progress bar from overlapping (#12780)

---
 .../discourse/app/components/topic-progress.js            | 5 +----
 app/assets/stylesheets/common/base/topic.scss             | 8 ++++++++
 app/assets/stylesheets/desktop/topic.scss                 | 1 -
 app/assets/stylesheets/mobile/topic-post.scss             | 4 ----
 app/assets/stylesheets/mobile/topic.scss                  | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-progress.js b/app/assets/javascripts/discourse/app/components/topic-progress.js
index f00764fced5..a6fea0ea891 100644
--- a/app/assets/javascripts/discourse/app/components/topic-progress.js
+++ b/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;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index bb36aef0d40..df419aabf1e 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index c1c16da2023..e373eb47282 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -85,7 +85,6 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  right: 2em;
   bottom: 0;
   left: 0;
   margin: 0 auto;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 0ee932d3e39..0c993402124 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 5ab50a8a6d9..3855e32836d 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/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) {