fix: scroll to note

src/constants/bookmark-width.ts

@@ -0,0 +1,5 @@
+export const BOOKMARK_WIDTH_REM = 2
+
+export const getBookmarkWidthPx = () =>
+  BOOKMARK_WIDTH_REM *
+  parseFloat(getComputedStyle(document.documentElement).fontSize)

src/hooks/useNoteOverlay.hook.ts

@@ -1,12 +1,10 @@
 import { computed, onMounted, Ref, ref, toValue } from "vue"
 
+import { BOOKMARK_WIDTH_REM, getBookmarkWidthPx } from "@/constants/bookmark-width"
 import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 
-const BOOKMARK_WIDTH = 2
-const OFFSET = 32 // stacked-note padding
-
 export const useNoteOverlay = (
   className: string,
   index: Ref<number> | number,
@@ -20,7 +18,7 @@ export const useNoteOverlay = (
     if (isMobile.value) {
       return y.value > valueIndex * noteHeight.value
     } else {
-      return x.value > valueIndex * getNoteWidth() - valueIndex * OFFSET
+      return x.value > valueIndex * getNoteWidth() - valueIndex * getBookmarkWidthPx()
     }
   })
 
@@ -39,7 +37,7 @@ export const useNoteOverlay = (
     if (isMobile.value) {
       noteElement.style.top = `0`
     } else {
-      noteElement.style.left = `${(toValue(index) + 1) * BOOKMARK_WIDTH}rem`
+      noteElement.style.left = `${(toValue(index) + 1) * BOOKMARK_WIDTH_REM}rem`
 
       const stackedNoteContainers = document.querySelectorAll(
         ".stacked-note",
@@ -47,7 +45,7 @@ export const useNoteOverlay = (
 
       stackedNoteContainers.forEach((stackedNote, ind) => {
         stackedNote.style.right = `calc(-${getNoteWidth()}px + ${
-          (stackedNotes.value.length - ind) * BOOKMARK_WIDTH
+          (stackedNotes.value.length - ind) * BOOKMARK_WIDTH_REM
         }rem)`
       })
     }

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -2,6 +2,7 @@ import { useWindowSize } from "@vueuse/core"
 import { useRouteQuery } from "@vueuse/router"
 import { nextTick, readonly } from "vue"
 
+import { getBookmarkWidthPx } from "@/constants/bookmark-width"
 import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
 
@@ -39,8 +40,7 @@ export const useRouteQueryStackedNotes = () => {
         }
       } else {
         if (noteId) {
-          const margin = index * 44
+          const left = (index + 1) * (getNoteWidth() - getBookmarkWidthPx())
-          const left = (index + 1) * getNoteWidth() - margin
           scrollToNote(left)
         } else {
           scrollToNote(0)