UX: Have the timeline dock slightly below where the buttons would go

app/assets/javascripts/discourse/components/topic-timeline.js.es6

@@ -4,13 +4,15 @@ import { observes } from 'ember-addons/ember-computed-decorators';
 
 export default MountWidget.extend(Docking, {
   widget: 'topic-timeline-container',
+  dockBottom: null,
   dockAt: null,
 
   buildArgs() {
     return { topic: this.get('topic'),
              topicTrackingState: this.topicTrackingState,
              enteredIndex: this.get('enteredIndex'),
-             dockAt: this.dockAt };
+             dockAt: this.dockAt,
+             dockBottom: this.dockBottom };
   },
 
   @observes('topic.highest_post_number')
@@ -25,7 +27,7 @@ export default MountWidget.extend(Docking, {
     const topicBottom = $('#topic-bottom').offset().top;
     const $timeline = this.$('.timeline-container');
     const timelineHeight = $timeline.height();
-    const parentTop = $('.posts-wrapper').offset().top;
+    const footerHeight = $('.timeline-footer-controls').outerHeight(true) || 0;
 
     const tTop = 140;
 
@@ -33,10 +35,12 @@ export default MountWidget.extend(Docking, {
     const posTop = tTop + info.offset();
     const pos = posTop + timelineHeight;
 
+    this.dockBottom = false;
     if (posTop < topicTop) {
-      this.dockAt = 0;
+      this.dockAt = topicTop;
     } else if (pos > topicBottom) {
-      this.dockAt = topicBottom - timelineHeight - parentTop;
+      this.dockAt = (topicBottom - timelineHeight) + footerHeight;
+      this.dockBottom = true;
       if (this.dockAt < 0) { this.dockAt = 0; }
     } else {
       this.dockAt = null;

app/assets/javascripts/discourse/templates/topic.hbs

@@ -66,24 +66,23 @@
     <div class='selected-posts {{unless multiSelect 'hidden'}}'>
       {{partial "selected-posts"}}
     </div>
+    {{#topic-navigation as |showTimeline|}}
+      {{#if showTimeline}}
+        {{topic-timeline topic=model
+                         enteredIndex=enteredIndex
+                         loading=model.postStream.loading
+                         delegated=topicDelegated}}
+      {{else}}
+        {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
+      {{/if}}
+
+      {{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}}
+    {{/topic-navigation}}
 
     <div class="row">
       <section class="topic-area" id="topic" data-topic-id="{{unbound model.id}}">
+
         <div class="posts-wrapper">
-
-          {{#topic-navigation as |showTimeline|}}
-            {{#if showTimeline}}
-              {{topic-timeline topic=model
-                               enteredIndex=enteredIndex
-                               loading=model.postStream.loading
-                               delegated=topicDelegated}}
-            {{else}}
-              {{topic-admin-menu-button topic=model fixed="true" delegated=topicDelegated}}
-            {{/if}}
-
-            {{topic-progress topic=model delegated=topicDelegated showTimeline=showTimeline}}
-          {{/topic-navigation}}
-
           {{conditional-loading-spinner condition=model.postStream.loadingAbove}}
 
           {{plugin-outlet "topic-above-posts"}}

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -187,8 +187,12 @@ createWidget('timeline-scrollarea', {
 createWidget('topic-timeline-container', {
   tagName: 'div.timeline-container',
   buildClasses(attrs) {
-    if (attrs.dockAt !== null) {
-      return attrs.dockAt > 0 ? 'timeline-docked timeline-docked-bottom' : 'timeline-docked';
+    if (attrs.dockAt) {
+      const result = ['timeline-docked'];
+      if (attrs.dockBottom) {
+        result.push('timeline-docked-bottom');
+      }
+      return result.join(' ');
     }
   },