refactor(notes): restore fixed mobile heights for scroll math

Re-pin .note and .stacked-note to 100dvh on mobile and bring back the
container height in useResizeContainer so (index + 1) * height has a
reachable scroll target. Switch the polled scroll helper to that same
formula instead of offsetTop.
This commit is contained in:
Julien Calixte
2026-04-29 11:32:23 +02:00
parent f529832eee
commit 68022971cd
4 changed files with 11 additions and 7 deletions

View File

@@ -256,6 +256,7 @@ $header-height: 40px;
.note {
width: 100vw;
height: 100dvh;
overflow-y: visible;
}

View File

@@ -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;

View File

@@ -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`

View File

@@ -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
}