remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(stacked-note): size mobile notes with svh to stabilize scroll target

Browse Source 
Dynamic viewport units rescale every note when the mobile address bar
grows or shrinks, shifting the scroll target by the address-bar height
mid-flight. Small viewport units stay constant across address-bar
transitions so the smooth scroll lands where it was aimed.
This commit is contained in:
Julien Calixte
2026-05-04 18:45:45 +02:00
parent cc266eac7c
commit 2f05b93f51
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FluxNote.vue
View File

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

2
src/components/StackedNote.vue
View File

@@ -429,7 +429,7 @@ $border-color: rgba(18, 19, 58, 0.2);
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.stacked-note { .stacked-note {
padding: 0 0.75rem 1rem; padding: 0 0.75rem 1rem;
height: 100dvh; height: 100svh;
section { section {
padding: 1rem 0; padding: 1rem 0;

2
src/hooks/useResizeContainer.hook.ts
View File

@@ -19,7 +19,7 @@ export const useResizeContainer = (
} }
if (isMobile.value) { if (isMobile.value) {
container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh` container.style.height = `${(stackedNotes.value.length + 1) * 100}svh`
} else { } else {
container.style.minWidth = `${ container.style.minWidth = `${
getNoteWidth() * (stackedNotes.value.length + 1) getNoteWidth() * (stackedNotes.value.length + 1)