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).

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" : ""

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;

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
 // --------------------------------------------------

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%;
   }

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 {