From af298fd12e68e39043d4c8c345854b51bc61cb09 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Sun, 21 May 2023 18:28:43 -0700
Subject: [PATCH] Minor display improvements

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/ScrollerManager.vue            | 13 +++++++++++--
 src/components/top-matter/FolderTopMatter.vue |  1 +
 src/components/top-matter/TopMatter.vue       | 11 ++++++++---
 src/global.scss                               |  5 +++++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/ScrollerManager.vue b/src/components/ScrollerManager.vue
index d71de83b..ed5f54fe 100644
--- a/src/components/ScrollerManager.vue
+++ b/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
diff --git a/src/components/top-matter/FolderTopMatter.vue b/src/components/top-matter/FolderTopMatter.vue
index 5a40a099..b7edf7d0 100644
--- a/src/components/top-matter/FolderTopMatter.vue
+++ b/src/components/top-matter/FolderTopMatter.vue
@@ -118,6 +118,7 @@ export default defineComponent({
 .top-matter {
   .breadcrumb {
     min-width: 0;
+    height: unset;
   }
 }
 </style>
diff --git a/src/components/top-matter/TopMatter.vue b/src/components/top-matter/TopMatter.vue
index f48228a6..fede6d64 100644
--- a/src/components/top-matter/TopMatter.vue
+++ b/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;
diff --git a/src/global.scss b/src/global.scss
index da096e4a..a1f259e0 100644
--- a/src/global.scss
+++ b/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;
+    }
   }
 }