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,11 +66,6 @@
     <div class='selected-posts {{unless multiSelect 'hidden'}}'>
       {{partial "selected-posts"}}
     </div>
-
-    <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
@@ -84,6 +79,10 @@
       {{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">
           {{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(' ');
     }
   },