diff --git a/src/components/MobileHeader.vue b/src/components/MobileHeader.vue
index c89edd2c..f29c7451 100644
--- a/src/components/MobileHeader.vue
+++ b/src/components/MobileHeader.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     id="mobile-header"
+    class="timeline-scroller-gap"
     :class="{
       visible: !isScrollDown,
     }"
diff --git a/src/components/ScrollerManager.vue b/src/components/ScrollerManager.vue
index a1a6fdf4..d71de83b 100644
--- a/src/components/ScrollerManager.vue
+++ b/src/components/ScrollerManager.vue
@@ -299,7 +299,13 @@ export default defineComponent({
       const extraY = this.recyclerBefore?.clientHeight ?? 0;
 
       // Exclude hover cursor height
-      this.topPadding = (<HTMLSpanElement>this.$refs.hoverCursor)?.offsetHeight ?? 0;
+      const hoverCursor = <HTMLSpanElement>this.$refs.hoverCursor;
+      this.topPadding = hoverCursor?.offsetHeight ?? 0;
+
+      // Add extra padding for any top elements
+      document.querySelectorAll('.timeline-scroller-gap').forEach((el) => {
+        this.topPadding += el.clientHeight;
+      });
 
       // Start with the first tick. Walk over all rows counting the
       // y position. When you hit a row with the tick, update y and
diff --git a/src/components/top-matter/TopMatter.vue b/src/components/top-matter/TopMatter.vue
index 6a6e0569..f48228a6 100644
--- a/src/components/top-matter/TopMatter.vue
+++ b/src/components/top-matter/TopMatter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="top-matter-container" v-if="currentmatter">
+  <div class="top-matter-container timeline-scroller-gap" v-if="currentmatter">
     <component :is="currentmatter" />
   </div>
 </template>