From ded770aff16705018cd75e16b8f836b3807c2d3e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Thu, 23 Apr 2026 17:58:33 +0200
Subject: [PATCH] fix(mobile): restore body scroll and prevent spurious section
 scroll

Three layered fixes for mobile note scrolling:

1. app.css / App.vue: on mobile, override overflow:hidden on html/body
   and overflow:visible on #main-app so content from useResizeContainer
   (which sets the note-container height to (n+1)*100vh) propagates to
   the document and document.body.scrollTop works again.

2. FluxNote.vue: give each .note an explicit height:100dvh on mobile so
   the percentage-based height:100% does not resolve against the
   inflated container height set by useResizeContainer.

3. StackedNote / StackedPublicNote: replace overflow-y:hidden with
   overflow-y:clip on the section. Unlike hidden, clip does not create a
   scroll container, so touch events fall through to the page scroll and
   the section never feels "draggable" when content fits within the note.
---
 src/App.vue                          | 6 ++++++
 src/components/FluxNote.vue          | 1 +
 src/components/StackedNote.vue       | 2 +-
 src/components/StackedPublicNote.vue | 2 +-
 src/styles/app.css                   | 7 +++++++
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bad30ec..8968b57 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,12 @@ const { isATProtoReady } = useATProtoLogin()
   overflow-y: hidden;
 }
 
+@media screen and (max-width: 768px) {
+  #main-app {
+    overflow: visible;
+  }
+}
+
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: 0.25s;
diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index b0ebe65..388e783 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -250,6 +250,7 @@ $header-height: 40px;
 
   .note {
     width: 100vw;
+    height: 100dvh;
     overflow-y: visible;
   }
 
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 4503376..83cc052 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -278,7 +278,7 @@ $border-color: rgba(18, 19, 58, 0.2);
     section {
       padding: 1rem 0 2rem;
       overflow-x: auto;
-      overflow-y: hidden;
+      overflow-y: clip;
     }
 
     .note-content {
diff --git a/src/components/StackedPublicNote.vue b/src/components/StackedPublicNote.vue
index 58df6bc..bfef73c 100644
--- a/src/components/StackedPublicNote.vue
+++ b/src/components/StackedPublicNote.vue
@@ -180,7 +180,7 @@ $border-color: rgba(18, 19, 58, 0.2);
     section {
       padding: 1rem 0 2rem;
       overflow-x: auto;
-      overflow-y: hidden;
+      overflow-y: clip;
     }
 
     .note-content {
diff --git a/src/styles/app.css b/src/styles/app.css
index e7e2ae2..5bac5ae 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -56,6 +56,13 @@ body {
   scroll-behavior: smooth;
 }
 
+@media screen and (max-width: 768px) {
+  html,
+  body {
+    overflow-y: auto;
+  }
+}
+
 .columns {
   margin-left: 0;
   margin-right: 0;