fix(mobile): scroll #main-app instead of body on mobile

body/html have overflow:hidden so scrollTop is a no-op on them.
#main-app is the actual scroll container; use overflow-y:auto on
mobile and target it directly in scrollToNote and the scroll listener.

src/App.vue

@@ -28,7 +28,7 @@ const { isATProtoReady } = useATProtoLogin()
 
 @media screen and (max-width: 768px) {
   #main-app {
-    overflow: visible;
+    overflow-y: auto;
   }
 }
 

src/hooks/useOverlay.hook.ts

@@ -10,31 +10,28 @@ export const useOverlay = (listen = true) => {
   const isMobile = computed(() => width.value <= MOBILE_BREAKPOINT)
 
   if (listen) {
-    // In Firefox/Chrome, body is the horizontal scroll container (body has
-    // computed overflow-x: auto from overflow-y: hidden). In Safari, the
-    // viewport (documentElement) is used instead. Listen on both.
     const updateScroll = () => {
-      x.value = document.body.scrollLeft || window.scrollX
+      const mainApp = document.getElementById("main-app")
-      y.value = document.body.scrollTop || window.scrollY
+      x.value = mainApp?.scrollLeft ?? 0
+      y.value = mainApp?.scrollTop ?? 0
     }
-    useEventListener(window, "scroll", updateScroll, {
+    useEventListener(
-      passive: true,
+      () => document.getElementById("main-app"),
-      capture: false
+      "scroll",
-    })
+      updateScroll,
-    useEventListener(document.body, "scroll", updateScroll, {
+      { passive: true }
-      passive: true,
+    )
-      capture: false
-    })
   }
 
   const scrollToNote = (to: number) => {
     const go = () => {
+      const mainApp = document.getElementById("main-app")
+      if (!mainApp) return
+
       if (isMobile.value) {
-        document.body.scrollTop = to
+        mainApp.scrollTop = to
-        document.documentElement.scrollTop = to
       } else {
-        document.body.scrollLeft = to
+        mainApp.scrollLeft = to
-        document.documentElement.scrollLeft = to
       }
     }