From 2f05b93f515455baac8e456549a229809f209426 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 4 May 2026 18:45:45 +0200 Subject: [PATCH] fix(stacked-note): size mobile notes with svh to stabilize scroll target 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. --- src/components/FluxNote.vue | 2 +- src/components/StackedNote.vue | 2 +- src/hooks/useResizeContainer.hook.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue index 79f2ce9..1105269 100644 --- a/src/components/FluxNote.vue +++ b/src/components/FluxNote.vue @@ -259,7 +259,7 @@ $header-height: 40px; .note { width: 100vw; - height: 100dvh; + height: 100svh; overflow-y: visible; } diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue index bd9551e..230595c 100644 --- a/src/components/StackedNote.vue +++ b/src/components/StackedNote.vue @@ -429,7 +429,7 @@ $border-color: rgba(18, 19, 58, 0.2); @media screen and (max-width: 768px) { .stacked-note { padding: 0 0.75rem 1rem; - height: 100dvh; + height: 100svh; section { padding: 1rem 0; diff --git a/src/hooks/useResizeContainer.hook.ts b/src/hooks/useResizeContainer.hook.ts index 8ecf3fb..383b694 100644 --- a/src/hooks/useResizeContainer.hook.ts +++ b/src/hooks/useResizeContainer.hook.ts @@ -19,7 +19,7 @@ export const useResizeContainer = ( } if (isMobile.value) { - container.style.height = `${(stackedNotes.value.length + 1) * 100}dvh` + container.style.height = `${(stackedNotes.value.length + 1) * 100}svh` } else { container.style.minWidth = `${ getNoteWidth() * (stackedNotes.value.length + 1)