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.
This commit is contained in:
Julien Calixte
2026-04-23 17:58:33 +02:00
parent d12d7b660b
commit ded770aff1
5 changed files with 16 additions and 2 deletions

View File

@@ -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;

View File

@@ -250,6 +250,7 @@ $header-height: 40px;
.note {
width: 100vw;
height: 100dvh;
overflow-y: visible;
}

View File

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

View File

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

View File

@@ -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;