Compare commits

...

2 Commits

Author SHA1 Message Date
Julien Calixte
68022971cd 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.
2026-04-29 11:32:23 +02:00
Julien Calixte
f529832eee refactor(notes): scope stacked-note sticky to desktop
Move position: sticky from the global .note rule into the desktop
@media block of the scoped stacked-note components, so mobile no longer
inherits sticky positioning (and no top is set there).
2026-04-29 11:32:13 +02:00
6 changed files with 15 additions and 9 deletions

View File

@@ -211,7 +211,6 @@ $header-height: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
position: sticky;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid rgba(18, 19, 58, 0.2); border-top: 1px solid rgba(18, 19, 58, 0.2);
@@ -257,6 +256,7 @@ $header-height: 40px;
.note { .note {
width: 100vw; width: 100vw;
height: 100dvh;
overflow-y: visible; overflow-y: visible;
} }

View File

@@ -313,6 +313,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;
section { section {
padding: 1rem 0 2rem; padding: 1rem 0 2rem;
@@ -330,6 +331,8 @@ $border-color: rgba(18, 19, 58, 0.2);
.stacked-note { .stacked-note {
border-top: 0; border-top: 0;
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
position: sticky;
top: 0;
} }
.title-stacked-note { .title-stacked-note {

View File

@@ -193,6 +193,8 @@ $border-color: rgba(18, 19, 58, 0.2);
.stacked-note { .stacked-note {
border-top: 0; border-top: 0;
border-left: 1px solid $border-color; border-left: 1px solid $border-color;
position: sticky;
top: 0;
} }
.title-stacked-note { .title-stacked-note {

View File

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

View File

@@ -52,17 +52,17 @@ export const useRouteQueryStackedNotes = () => {
index: number, index: number,
attempts = 30 attempts = 30
) => { ) => {
if (attempts <= 0) {
scrollToNote((index + 1) * height.value)
return
}
const element = document.querySelector( const element = document.querySelector(
`.note-${cleanNoteId}` `.note-${cleanNoteId}`
) as HTMLElement | null ) as HTMLElement | null
if (element) { if (element) {
scrollToNote(element.offsetTop) scrollToNote((index + 1) * element.clientHeight)
return
}
if (attempts <= 0) {
scrollToNote((index + 1) * height.value)
return return
} }

View File

@@ -241,7 +241,6 @@ watch(
overflow-y: auto; overflow-y: auto;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
position: sticky;
.title { .title {
text-align: left; text-align: left;