DEV: Small refactor of topic progress wrapper positioning (#10646)

DEV: Small refactor of topic progress wrapper positioning (#10646)

This moves the logic for horizontally placing the topic progress wrapper from the JS component to SCSS. Doing so means it is more easily overridable by themes and plugins.

This also changes the left/right spacing from 1em to 2em for non-mobile screens (it fits better on iPad portrait especially).

diff --git a/app/assets/javascripts/discourse/app/components/topic-progress.js b/app/assets/javascripts/discourse/app/components/topic-progress.js
index 119ea42..6bfb92a 100644
--- a/app/assets/javascripts/discourse/app/components/topic-progress.js
+++ b/app/assets/javascripts/discourse/app/components/topic-progress.js
@@ -162,7 +162,7 @@ export default Component.extend({
     if ($iPadFooterNav && $iPadFooterNav.length > 0) {
       bottom += $iPadFooterNav.outerHeight();
     }
-    const wrapperDir = $html.hasClass("rtl") ? "left" : "right";
+
     const draftComposerHeight = 40;
 
     if (composerHeight > 0) {
@@ -179,13 +179,6 @@ export default Component.extend({
 
     this.set("docked", isDocked);
 
-    const $replyArea = $("#reply-control .reply-area");
-    if ($replyArea && $replyArea.length > 0) {
-      $wrapper.css(wrapperDir, `${$replyArea.offset().left}px`);
-    } else {
-      $wrapper.css(wrapperDir, "1em");
-    }
-
     $wrapper.css(
       "margin-bottom",
       !isDocked && composerHeight > draftComposerHeight ? "0px" : ""
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 2bf91f4..d472ae4 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -8,7 +8,7 @@
   left: 0;
   margin-left: auto;
   margin-right: auto;
-  max-width: 1475px;
+  max-width: $reply-area-max-width;
   width: 100%;
   &.hide-preview {
     max-width: 740px;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index ea48592..82692c8 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -13,6 +13,7 @@ $input-padding: 4px 10px;
 $topic-body-width: 690px;
 $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
+$reply-area-max-width: 1475px !default;
 
 // Brand color variables
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index b074a3b..c3728ec 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -77,13 +77,23 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  right: 1em;
+  right: 2em;
   bottom: 0;
+  left: 0;
+  margin: 0 auto;
+  max-width: $reply-area-max-width;
+  display: flex;
+  justify-content: flex-end;
   z-index: z("timeline");
   &.docked {
     position: absolute;
     bottom: -70px;
   }
+  html.rtl & {
+    justify-content: flex-start;
+    right: 0;
+    left: 2em;
+  }
 }
 
 #topic-progress-expanded {
@@ -194,14 +204,6 @@
     left: 0;
   }
 
-  #topic-progress-wrapper {
-    right: 19vw;
-  }
-
-  #topic-progress-wrapper.docked {
-    right: 19vw;
-  }
-
   #topic-footer-main-buttons {
     max-width: 70%;
   }
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 5b991b4..7cad30b 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -43,12 +43,16 @@
 
 #topic-progress-wrapper {
   position: fixed;
-  right: 0;
+  right: 1em;
   bottom: 0;
   z-index: z("timeline");
   &:not(.docked) {
     margin-bottom: env(safe-area-inset-bottom);
   }
+  html.rtl & {
+    right: 0;
+    left: 1em;
+  }
 }
 
 #topic-progress-expanded {

GitHub sha: 94ed54a6

This commit appears in #10646 which was approved by CvX. It was merged by pmusaraj.