💄 (breadcrumb)

src/hooks/useNoteOverlay.hook.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref } from '@vue/runtime-core'
+import { computed, onMounted, ref, watch } from '@vue/runtime-core'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
@@ -33,10 +33,17 @@ export const useNoteOverlay = (className: string, index: number) => {
       noteElement.style.top = `0`
     } else {
       noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
-      noteElement.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value
-        .length -
-        index) *
-        BOOKMARK_WIDTH}rem)`
+
+      const stackedNoteContainers = document.querySelectorAll(
+        '.stacked-note'
+      ) as NodeListOf<HTMLElement>
+
+      stackedNoteContainers.forEach((stackedNote, ind) => {
+        stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value
+          .length -
+          ind) *
+          BOOKMARK_WIDTH}rem)`
+      })
     }
   })
 

src/hooks/useOverlay.hook.ts

@@ -1,10 +1,9 @@
 import { computed, ref } from 'vue'
 import { useEventListener, useWindowSize } from '@vueuse/core'
-
 import { MOBILE_BREAKPOINT } from '@/constants/mobile'
 
 export const useOverlay = (listen = true) => {
-  const body = document.querySelector('body') as HTMLBodyElement
+  const body = document.body
   const x = ref(0)
   const y = ref(0)
   const { width } = useWindowSize()