fix: note width. TODO: sync NOTE_WIDTH js constant to css variable --note-width

src/constants/note-width.ts

@@ -1 +1 @@
-export const NOTE_WIDTH = 620
+export const NOTE_WIDTH = 480

src/hooks/useNoteOverlay.hook.ts

@@ -28,11 +28,12 @@ export const useNoteOverlay = (
     const { stackedNotes } = useRouteQueryStackedNotes()
     const noteElement = document.querySelector(
       `.${className}`,
-    ) as HTMLElement | null
+    ) satisfies HTMLElement | null
 
     if (!noteElement) {
       return
     }
+
     noteHeight.value = noteElement.clientHeight
 
     if (isMobile.value) {
@@ -42,7 +43,7 @@ export const useNoteOverlay = (
 
       const stackedNoteContainers = document.querySelectorAll(
         ".stacked-note",
-      ) as NodeListOf<HTMLElement>
+      ) satisfies NodeListOf<HTMLElement>
 
       stackedNoteContainers.forEach((stackedNote, ind) => {
         stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${

src/views/PublicNoteListView.vue

@@ -44,6 +44,7 @@ const getAlias = (did: string) =>
 <template>
   <main class="public-note-list-view">
     <h1>Remanso notes</h1>
+    <back-button class="back-button" />
     <div v-if="isLoading"></div>
     <div v-else>
       <ul
@@ -76,7 +77,6 @@ const getAlias = (did: string) =>
         </li>
       </ul>
     </div>
-    <BackButton class="back-button" />
   </main>
 </template>