From b03626bb1ad8a37917d61620959691466e059f93 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 15 Feb 2026 08:40:58 +0100
Subject: [PATCH] fix: note width. TODO: sync NOTE_WIDTH js constant to css
 variable --note-width

---
 src/constants/note-width.ts      | 2 +-
 src/hooks/useNoteOverlay.hook.ts | 5 +++--
 src/views/PublicNoteListView.vue | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/constants/note-width.ts b/src/constants/note-width.ts
index 85a7bf3..6d30842 100644
--- a/src/constants/note-width.ts
+++ b/src/constants/note-width.ts
@@ -1 +1 @@
-export const NOTE_WIDTH = 620
+export const NOTE_WIDTH = 480
diff --git a/src/hooks/useNoteOverlay.hook.ts b/src/hooks/useNoteOverlay.hook.ts
index 0393c68..f7c1f61 100644
--- a/src/hooks/useNoteOverlay.hook.ts
+++ b/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 + ${
diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index ef1bc79..d5ea1d5 100644
--- a/src/views/PublicNoteListView.vue
+++ b/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>