diff --git a/src/components/messageStream/overlays/ImageLightbox.tsx b/src/components/messageStream/overlays/ImageLightbox.tsx index 639f786..c41657d 100644 --- a/src/components/messageStream/overlays/ImageLightbox.tsx +++ b/src/components/messageStream/overlays/ImageLightbox.tsx @@ -147,34 +147,36 @@ function Filmstrip({ className="shrink-0 bg-gradient-to-t from-black/90 to-transparent pb-[max(env(safe-area-inset-bottom),0.75rem)] pt-3" onClick={(e) => e.stopPropagation()} > -
- {images.map((image, i) => { - const active = i === index; - return ( - - ); - })} +
+
+ {images.map((image, i) => { + const active = i === index; + return ( + + ); + })} +
); @@ -213,13 +215,21 @@ function LightboxView({ if (e.key === "ArrowRight") goNext(); }; window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [goPrev, goNext, onClose]); + + // Lock background scroll while the lightbox is open, then restore the exact + // scroll position on close — otherwise dismissing the overlay leaves the page + // scrolled back to the top instead of where the user was reading. + useEffect(() => { + const scrollY = window.scrollY; const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { - window.removeEventListener("keydown", onKey); document.body.style.overflow = prevOverflow; + window.scrollTo(0, scrollY); }; - }, [goPrev, goNext, onClose]); + }, []); useEffect(() => { setIsCaptionVisible(true);