2f05b93f51
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.
43 lines
998 B
TypeScript
43 lines
998 B
TypeScript
import { onMounted, onUnmounted, type Ref, watch } from "vue"
|
|
|
|
import { getNoteWidth } from "@/constants/note-width"
|
|
import { useOverlay } from "@/hooks/useOverlay.hook"
|
|
|
|
export const useResizeContainer = (
|
|
containerClass: string,
|
|
stackedNotes: Readonly<Ref<readonly string[]>>
|
|
) => {
|
|
const { isMobile } = useOverlay(false)
|
|
|
|
const resizeContainer = () => {
|
|
const container = document.querySelector(
|
|
`.${containerClass}`
|
|
) as HTMLElement | null
|
|
|
|
if (!container) {
|
|
return
|
|
}
|
|
|
|
if (isMobile.value) {
|
|
container.style.height = `${(stackedNotes.value.length + 1) * 100}svh`
|
|
} else {
|
|
container.style.minWidth = `${
|
|
getNoteWidth() * (stackedNotes.value.length + 1)
|
|
}px`
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
resizeContainer()
|
|
window.addEventListener("resize", resizeContainer)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("resize", resizeContainer)
|
|
})
|
|
|
|
watch(stackedNotes, resizeContainer, {
|
|
immediate: true
|
|
})
|
|
}
|