From c379bc989fa54f549f71535b6a2d7d54ff0c91b5 Mon Sep 17 00:00:00 2001
From: EiSiMo <mail@moritz.run>
Date: Thu, 23 Apr 2026 13:06:32 +0200
Subject: [PATCH] debug(lightbox): log overlay rect, computed style, arrow
 handler fires
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tile-click logs from the user's session reveal that the modal opens
(display becomes flex) but every "arrow click" actually lands on a
gallery thumbnail behind the modal — closest(.flat-gallery-tile)
finds a button with target=img. So either the overlay isn't covering
the viewport (positioning fails) or pointer events leak through.

Add log lines to settle it:
- open() now dumps computed display/position/zIndex/inset/pointer-events
  + getBoundingClientRect() and the viewport size, so we can see
  whether the overlay box actually spans the screen.
- Logs the prev/next button rects too — tells us where the arrows
  sit and whether they overlap the gallery.
- Each of prevBtn/nextBtn/closeBtn/overlay click handlers logs when
  it actually fires — confirms whether arrow handlers are reached at
  all when the user clicks them.
- step() logs entry, delta, idx and out-of-range exits.

All logs still tagged [lazyflat.lightbox] / DEBUG(lightbox): for grep
+ removal once fixed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/static/app.js | 42 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/web/static/app.js b/web/static/app.js
index 5a3961b..67dbfbe 100644
--- a/web/static/app.js
+++ b/web/static/app.js
@@ -180,8 +180,23 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
     overlay.setAttribute("aria-hidden", "false");
     document.body.classList.add("lightbox-open");
     render();
-    console.log("[lazyflat.lightbox] open() done — overlay computed display:",
-                getComputedStyle(overlay).display, "src:", imgEl.src);
+    // DEBUG(lightbox): dump everything we'd want to know if clicks pass through.
+    const cs = getComputedStyle(overlay);
+    const rect = overlay.getBoundingClientRect();
+    console.log("[lazyflat.lightbox] open() done", {
+      display: cs.display, position: cs.position, zIndex: cs.zIndex,
+      top: cs.top, left: cs.left, right: cs.right, bottom: cs.bottom,
+      pointerEvents: cs.pointerEvents,
+      rect: { x: rect.x, y: rect.y, w: rect.width, h: rect.height },
+      viewport: { w: window.innerWidth, h: window.innerHeight, scrollY: window.scrollY },
+      src: imgEl.src,
+    });
+    const prevRect = prevBtn.getBoundingClientRect();
+    const nextRect = nextBtn.getBoundingClientRect();
+    console.log("[lazyflat.lightbox] arrow rects", {
+      prev: { hidden: prevBtn.hidden, x: prevRect.x, y: prevRect.y, w: prevRect.width, h: prevRect.height },
+      next: { hidden: nextBtn.hidden, x: nextRect.x, y: nextRect.y, w: nextRect.width, h: nextRect.height },
+    });
   }
 
   function close() {
@@ -193,16 +208,31 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
   }
 
   function step(delta) {
+    console.log("[lazyflat.lightbox] step()", { delta, from: idx, max: urls.length - 1 });
     const next = idx + delta;
-    if (next < 0 || next >= urls.length) return;
+    if (next < 0 || next >= urls.length) {
+      console.log("[lazyflat.lightbox] step() out of range — ignored");
+      return;
+    }
     idx = next;
     render();
   }
 
-  prevBtn.addEventListener("click", () => step(-1));
-  nextBtn.addEventListener("click", () => step(1));
-  closeBtn.addEventListener("click", close);
+  prevBtn.addEventListener("click", (ev) => {
+    console.log("[lazyflat.lightbox] prevBtn click handler fired", { target: ev.target });
+    step(-1);
+  });
+  nextBtn.addEventListener("click", (ev) => {
+    console.log("[lazyflat.lightbox] nextBtn click handler fired", { target: ev.target });
+    step(1);
+  });
+  closeBtn.addEventListener("click", (ev) => {
+    console.log("[lazyflat.lightbox] closeBtn click handler fired");
+    close();
+  });
   overlay.addEventListener("click", (ev) => {
+    console.log("[lazyflat.lightbox] overlay click — target===overlay?", ev.target === overlay,
+                "target=", ev.target);
     if (ev.target === overlay) close();
   });
   document.addEventListener("keydown", (ev) => {