From 449a16f791946590068a559e8aaf7e556ed1d74a Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Wed, 22 Apr 2026 23:52:03 +0200
Subject: [PATCH] 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>
---
 src/App.vue                          | 2 ++
 src/components/FluxNote.vue          | 2 +-
 src/hooks/useResizeContainer.hook.ts | 9 +++++++--
 src/styles/app.css                   | 1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1d2fb9f..bad30ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,8 @@ const { isATProtoReady } = useATProtoLogin()
   max-width: none;
   display: flex;
   flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 ::view-transition-old(root),
diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 2c0de63..b0ebe65 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -204,7 +204,7 @@ $header-height: 40px;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    height: 100vh;
+    height: 100%;
     position: sticky;
 
     &:not(:first-child) {
diff --git a/src/hooks/useResizeContainer.hook.ts b/src/hooks/useResizeContainer.hook.ts
index 461d5bb..52aa9ff 100644
--- a/src/hooks/useResizeContainer.hook.ts
+++ b/src/hooks/useResizeContainer.hook.ts
@@ -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, {
diff --git a/src/styles/app.css b/src/styles/app.css
index a00a083..e7e2ae2 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -52,6 +52,7 @@
 html,
 body {
   height: 100dvh;
+  overflow: hidden;
   scroll-behavior: smooth;
 }