chore(debug): add temporary scroll overlay for mobile diagnosis

src/hooks/useOverlay.hook.ts

@@ -42,7 +42,32 @@ export const useOverlay = (listen = true) => {
 
   const scrollToElement = (element: HTMLElement) => {
     requestAnimationFrame(() => {
-      element.scrollIntoView({ behavior: "smooth", block: "start" })
+      const mainApp = document.getElementById("main-app")
+      const debug = document.getElementById("scroll-debug")
+      if (debug && mainApp) {
+        const er = element.getBoundingClientRect()
+        const cr = mainApp.getBoundingClientRect()
+        const lines = [
+          `before scrollTop: ${mainApp.scrollTop}`,
+          `mainApp scrollH: ${mainApp.scrollHeight} clientH: ${mainApp.clientHeight}`,
+          `body scrollY: ${window.scrollY} innerH: ${window.innerHeight}`,
+          `el.rect.top: ${er.top.toFixed(1)}`,
+          `mainApp.rect.top: ${cr.top.toFixed(1)}`,
+          `target: ${(er.top - cr.top + mainApp.scrollTop).toFixed(1)}`
+        ]
+        debug.textContent = lines.join("\n")
+
+        element.scrollIntoView({ behavior: "smooth", block: "start" })
+
+        requestAnimationFrame(() => {
+          debug.textContent += `\nafter1f scrollTop: ${mainApp.scrollTop}`
+          setTimeout(() => {
+            debug.textContent += `\nafter500ms scrollTop: ${mainApp.scrollTop}`
+          }, 500)
+        })
+      } else {
+        element.scrollIntoView({ behavior: "smooth", block: "start" })
+      }
     })
   }