fix(layout): prevent document-level scroll-y when stacked notes overflow
Contain horizontal overflow within #main-app instead of leaking to the document, which caused a horizontal scrollbar to consume viewport height and trigger an unwanted vertical scrollbar. Also fix note pane height to use 100% instead of 100vh, and switch useResizeContainer to minWidth so the flex container can grow when the window is wider than the notes. Add a window resize listener to keep the value accurate on resize. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { onMounted, type Ref, watch } from "vue"
|
||||
import { onMounted, onUnmounted, type Ref, watch } from "vue"
|
||||
|
||||
import { getNoteWidth } from "@/constants/note-width"
|
||||
import { useOverlay } from "@/hooks/useOverlay.hook"
|
||||
@@ -21,7 +21,7 @@ export const useResizeContainer = (
|
||||
if (isMobile.value) {
|
||||
container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
|
||||
} else {
|
||||
container.style.width = `${
|
||||
container.style.minWidth = `${
|
||||
getNoteWidth() * (stackedNotes.value.length + 1)
|
||||
}px`
|
||||
}
|
||||
@@ -29,6 +29,11 @@ export const useResizeContainer = (
|
||||
|
||||
onMounted(() => {
|
||||
resizeContainer()
|
||||
window.addEventListener("resize", resizeContainer)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", resizeContainer)
|
||||
})
|
||||
|
||||
watch(stackedNotes, resizeContainer, {
|
||||
|
||||
Reference in New Issue
Block a user