diff --git a/app/assets/javascripts/discourse/app/components/topic-progress.js b/app/assets/javascripts/discourse/app/components/topic-progress.js
index 119ea420b44..6bfb92a0763 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 2bf91f4c58f..d472ae41207 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 ea48592914b..82692c8db10 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 b074a3b69c3..c3728ec50cb 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 5b991b412fa..7cad30b2723 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 {