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:
@@ -22,6 +22,8 @@ const { isATProtoReady } = useATProtoLogin()
|
|||||||
max-width: none;
|
max-width: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
::view-transition-old(root),
|
::view-transition-old(root),
|
||||||
|
|||||||
@@ -204,7 +204,7 @@ $header-height: 40px;
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
|
|||||||
@@ -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 { getNoteWidth } from "@/constants/note-width"
|
||||||
import { useOverlay } from "@/hooks/useOverlay.hook"
|
import { useOverlay } from "@/hooks/useOverlay.hook"
|
||||||
@@ -21,7 +21,7 @@ export const useResizeContainer = (
|
|||||||
if (isMobile.value) {
|
if (isMobile.value) {
|
||||||
container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
|
container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
|
||||||
} else {
|
} else {
|
||||||
container.style.width = `${
|
container.style.minWidth = `${
|
||||||
getNoteWidth() * (stackedNotes.value.length + 1)
|
getNoteWidth() * (stackedNotes.value.length + 1)
|
||||||
}px`
|
}px`
|
||||||
}
|
}
|
||||||
@@ -29,6 +29,11 @@ export const useResizeContainer = (
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
resizeContainer()
|
resizeContainer()
|
||||||
|
window.addEventListener("resize", resizeContainer)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener("resize", resizeContainer)
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(stackedNotes, resizeContainer, {
|
watch(stackedNotes, resizeContainer, {
|
||||||
|
|||||||
@@ -52,6 +52,7 @@
|
|||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
|
overflow: hidden;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user