From c88340d5f14a9bcd36b31d6ab18d9a0b8d18f785 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 4 May 2026 19:02:35 +0200
Subject: [PATCH] chore(debug): add temporary scroll overlay for mobile
 diagnosis

---
 src/App.vue                  | 20 ++++++++++++++++++++
 src/hooks/useOverlay.hook.ts | 27 ++++++++++++++++++++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 9d7363a..30b9626 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@ const { isATProtoReady } = useATProtoLogin()
 
     <new-version />
   </div>
+  <pre id="scroll-debug"></pre>
 </template>
 
 <style lang="scss">
@@ -45,4 +46,23 @@ const { isATProtoReady } = useATProtoLogin()
 ::view-transition-new(remanso-logo) {
   object-fit: contain;
 }
+
+#scroll-debug {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  margin: 0;
+  padding: 4px 6px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font: 10px/1.3 ui-monospace, monospace;
+  white-space: pre;
+  pointer-events: none;
+  max-width: 100vw;
+}
+
+#scroll-debug:empty {
+  display: none;
+}
 </style>
diff --git a/src/hooks/useOverlay.hook.ts b/src/hooks/useOverlay.hook.ts
index 621e5b1..5e8c78c 100644
--- a/src/hooks/useOverlay.hook.ts
+++ b/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" })
+      }
     })
   }