3 files changed, 19 insertions, 22 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 1050b87a..59170f49 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -25,6 +25,7 @@ const Timeline = {
     'title',
     'userId',
     'listId',
+    'statusId',
     'tag',
     'embedded',
     'count',
@@ -77,13 +78,13 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-embedded']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
-        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body']),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : ['panel-body']),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : ['panel-body'])
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
@@ -121,6 +122,7 @@ const Timeline = {
       showImmediately,
       userId: this.userId,
       listId: this.listId,
+      statusId: this.statusId,
       tag: this.tag
     })
   },
@@ -183,6 +185,7 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         listId: this.listId,
+        statusId: this.statusId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 4371947d..2dd66328 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,31 +1,20 @@
-@import "../../variables";
-
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: var(--badgeNeutral);
+  .timeline-body {
+    background: none;
+    backdrop-filter: none;
   }
 
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
     text-align: right;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
     position: absolute;
     left: calc(50% - 0.5em);
     top: calc(50% - 0.4em);
     padding: 0.2em;
     margin-left: 0.7em;
     margin-top: -1em;
-    background-color: var(--badgeNeutral);
-    color: var(--badgeNeutralText);
   }
 
   .loadmore-button {
@@ -37,16 +26,21 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 1) + var(--navbar-height));
     z-index: 2;
   }
 
-  &.-nonpanel {
+  &.-embedded {
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
 
+      // Override the shrug empty filler
+      &:empty::before {
+        content: initial;
+      }
+
       .button-default,
       .alert {
         line-height: 2em;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2279f21a..862a1972 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -38,7 +38,7 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-badge">
+            <div class="badge -counter">
               {{ mobileLoadButtonString }}
             </div>
           </button>