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:
Julien Calixte
2026-04-22 23:52:03 +02:00
parent ee8bbd4a37
commit 449a16f791
4 changed files with 11 additions and 3 deletions

View File

@@ -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),

View File

@@ -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) {

View File

@@ -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, {

View File

@@ -52,6 +52,7 @@
html, html,
body { body {
height: 100dvh; height: 100dvh;
overflow: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
} }