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:
@@ -256,6 +256,7 @@ $header-height: 40px;
|
||||
|
||||
.note {
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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`
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user