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.
This commit is contained in:
@@ -259,7 +259,7 @@ $header-height: 40px;
|
||||
|
||||
.note {
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
height: 100svh;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user