diff --git a/app/assets/javascripts/discourse/app/components/topic-navigation.js b/app/assets/javascripts/discourse/app/components/topic-navigation.js
index 8e5c07ad9cf..b6a15b6e1f3 100644
--- a/app/assets/javascripts/discourse/app/components/topic-navigation.js
+++ b/app/assets/javascripts/discourse/app/components/topic-navigation.js
@@ -5,6 +5,7 @@ import PanEvents, {
 import Component from "@ember/component";
 import EmberObject from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
+import { headerOffset } from "discourse/components/site-header";
 import { later, next } from "@ember/runloop";
 import { observes } from "discourse-common/utils/decorators";
 import showModal from "discourse/lib/show-modal";
@@ -13,7 +14,10 @@ const MIN_WIDTH_TIMELINE = 924,
   MIN_HEIGHT_TIMELINE = 325;
 
 export default Component.extend(PanEvents, {
-  classNameBindings: ["info.topicProgressExpanded:topic-progress-expanded"],
+  classNameBindings: [
+    "info.topicProgressExpanded:topic-progress-expanded",
+    "info.renderTimeline:with-timeline:with-topic-progress",
+  ],
   composerOpen: null,
   info: null,
   isPanning: false,
@@ -47,15 +51,12 @@ export default Component.extend(PanEvents, {
       let renderTimeline = !this.site.mobileView;
 
       if (renderTimeline) {
-        const width = window.innerWidth,
-          composer = document.getElementById("reply-control"),
-          headerContainer = document.querySelector(".d-header"),
-          headerHeight = (headerContainer && headerContainer.offsetHeight) || 0;
+        const composer = document.getElementById("reply-control");
 
         if (composer) {
           renderTimeline =
-            width > MIN_WIDTH_TIMELINE &&
-            window.innerHeight - composer.offsetHeight - headerHeight >
+            window.innerWidth > MIN_WIDTH_TIMELINE &&
+            window.innerHeight - composer.offsetHeight - headerOffset() >
               MIN_HEIGHT_TIMELINE;
         }
       }
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index cda3f60f8e9..e46bfd77d91 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -52,6 +52,10 @@ $topic-progress-height: 42px;
       margin-left: 1em;
       z-index: z("timeline");
 
+      &.with-topic-progress {
+        align-self: end;
+      }
+
       &.topic-progress-expanded {
         z-index: z("fullscreen");
       }
@@ -153,7 +157,7 @@ $topic-progress-height: 42px;
   &:not(.docked) {
     @media screen and (min-width: $reply-area-max-width) {
       // position to right side of composer
-      right: 50%;
+      right: calc(50% + 10px);
       margin-right: calc(#{$reply-area-max-width} / 2 * -1);
     }
   }