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:
@@ -26,6 +26,12 @@ const { isATProtoReady } = useATProtoLogin()
|
|||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#main-app {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
::view-transition-old(root),
|
::view-transition-old(root),
|
||||||
::view-transition-new(root) {
|
::view-transition-new(root) {
|
||||||
animation-duration: 0.25s;
|
animation-duration: 0.25s;
|
||||||
|
|||||||
@@ -250,6 +250,7 @@ $header-height: 40px;
|
|||||||
|
|
||||||
.note {
|
.note {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
height: 100dvh;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -278,7 +278,7 @@ $border-color: rgba(18, 19, 58, 0.2);
|
|||||||
section {
|
section {
|
||||||
padding: 1rem 0 2rem;
|
padding: 1rem 0 2rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-content {
|
.note-content {
|
||||||
|
|||||||
@@ -180,7 +180,7 @@ $border-color: rgba(18, 19, 58, 0.2);
|
|||||||
section {
|
section {
|
||||||
padding: 1rem 0 2rem;
|
padding: 1rem 0 2rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-content {
|
.note-content {
|
||||||
|
|||||||
@@ -56,6 +56,13 @@ body {
|
|||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.columns {
|
.columns {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user