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()}
     >
-      <div className="mx-auto flex max-w-[920px] gap-2 overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      <div className="overflow-x-auto px-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {images.map((image, i) => {
+        <div className="mx-auto flex w-fit max-w-[920px] gap-2">
-          const active = i === index;
+          {images.map((image, i) => {
-          return (
+            const active = i === index;
-            <button
+            return (
-              key={image.id}
+              <button
-              ref={active ? activeRef : null}
+                key={image.id}
-              type="button"
+                ref={active ? activeRef : null}
-              onClick={(e) => {
+                type="button"
-                e.stopPropagation();
+                onClick={(e) => {
-                onSelect(i);
+                  e.stopPropagation();
-              }}
+                  onSelect(i);
-              className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-black transition duration-200 md:h-16 md:w-16 ${
+                }}
-                active
+                className={`relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-black transition duration-200 md:h-16 md:w-16 ${
-                  ? "opacity-100 ring-2 ring-white"
+                  active
-                  : "opacity-45 hover:opacity-80"
+                    ? "opacity-100 ring-2 ring-white"
-              }`}
+                    : "opacity-45 hover:opacity-80"
-              aria-label={`Image ${i + 1}`}
+                }`}
-              aria-current={active}
+                aria-label={`Image ${i + 1}`}
-            >
+                aria-current={active}
-              <BubbleImage
+              >
-                src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
+                <BubbleImage
-                fallbackSrc={[image.thumbUrl, image.url]}
+                  src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
-                className="h-full w-full object-cover"
+                  fallbackSrc={[image.thumbUrl, image.url]}
-              />
+                  className="h-full w-full object-cover"
-            </button>
+                />
-          );
+              </button>
-        })}
+            );
+          })}
+        </div>
       </div>
     </div>
   );
@@ -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);