Minor display improvements

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/ScrollerManager.vue

@@ -22,7 +22,7 @@
     <span
       ref="hoverCursor"
       class="cursor hv"
-      :style="{ transform: `translateY(max(calc(${hoverCursorY}px - 100%), 0px))` }"
+      :style="{ transform: hoverCursorTransform }"
       @touchmove.prevent="touchmove"
       @touchstart.passive="interactstart"
       @touchend.passive="interactend"
@@ -144,6 +144,15 @@ export default defineComponent({
     height(): number {
       return this.fullHeight - this.topPadding;
     },
+
+    /** Position of hover cursor */
+    hoverCursorTransform(): string {
+      const m = utils.isMobile();
+      const min = m ? '2px' : '0px'; // padding for curvature
+      const max = `calc(${this.fullHeight - (m ? 6 : 0)}px - 100%)`; // padding for shadow
+      const val = `calc(${this.hoverCursorY}px - 100%)`;
+      return `translateY(clamp(${min}, ${val}, ${max}))`;
+    },
   },
 
   methods: {
@@ -304,7 +313,7 @@ export default defineComponent({
 
       // Add extra padding for any top elements
       document.querySelectorAll('.timeline-scroller-gap').forEach((el) => {
-        this.topPadding += el.clientHeight;
+        this.topPadding += el.clientHeight + 1;
       });
 
       // Start with the first tick. Walk over all rows counting the

src/components/top-matter/FolderTopMatter.vue

@@ -118,6 +118,7 @@ export default defineComponent({
 .top-matter {
   .breadcrumb {
     min-width: 0;
+    height: unset;
   }
 }
 </style>

src/components/top-matter/TopMatter.vue

@@ -80,9 +80,14 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .top-matter-container {
-  padding-top: 4px;
+  position: relative;
+  z-index: 500;
+  padding: 2px 0;
+  background-color: var(--color-main-background);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+
   @media (max-width: 768px) {
-    padding-left: 10px;
+    padding-left: 10px; // extra space visual
   }
 
   > div {
@@ -104,7 +109,7 @@ export default defineComponent({
   }
 
   :deep .right-actions {
-    margin-right: 40px;
+    margin-right: 12px;
     z-index: 50;
     @media (max-width: 768px) {
       margin-right: 10px;

src/global.scss

@@ -29,6 +29,11 @@ body {
   #app-navigation-vue {
     border-top-left-radius: var(--body-container-radius);
     border-bottom-left-radius: var(--body-container-radius);
+
+    .app-navigation-toggle {
+      // Move up to align with back button of top matter
+      top: 2px;
+    }
   }
 }