diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue index 566809e..44e89aa 100644 --- a/src/components/FluxNote.vue +++ b/src/components/FluxNote.vue @@ -256,6 +256,7 @@ $header-height: 40px; .note { width: 100vw; + height: 100dvh; overflow-y: visible; } diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index 6846bb3..30f4b13 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -313,6 +313,7 @@ $border-color: rgba(18, 19, 58, 0.2); @media screen and (max-width: 768px) { .stacked-note { padding: 0 0.75rem 1rem; + height: 100dvh; section { padding: 1rem 0 2rem; diff --git a/src/hooks/useResizeContainer.hook.ts b/src/hooks/useResizeContainer.hook.ts index 2fa6462..8ecf3fb 100644 --- a/src/hooks/useResizeContainer.hook.ts +++ b/src/hooks/useResizeContainer.hook.ts @@ -18,7 +18,9 @@ export const useResizeContainer = ( return } - if (!isMobile.value) { + if (isMobile.value) { + container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh` + } else { container.style.minWidth = `${ getNoteWidth() * (stackedNotes.value.length + 1) }px` diff --git a/src/hooks/useRouteQueryStackedNotes.hook.ts b/src/hooks/useRouteQueryStackedNotes.hook.ts index b5b1292..edb959b 100644 --- a/src/hooks/useRouteQueryStackedNotes.hook.ts +++ b/src/hooks/useRouteQueryStackedNotes.hook.ts @@ -52,17 +52,17 @@ export const useRouteQueryStackedNotes = () => { index: number, attempts = 30 ) => { - if (attempts <= 0) { - scrollToNote((index + 1) * height.value) - return - } - const element = document.querySelector( `.note-${cleanNoteId}` ) as HTMLElement | null if (element) { - scrollToNote(element.offsetTop) + scrollToNote((index + 1) * element.clientHeight) + return + } + + if (attempts <= 0) { + scrollToNote((index + 1) * height.value) return }