src/components/messageStream/overlays/ImageLightbox.tsx

@@ -147,7 +147,8 @@ 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">
+        <div className="mx-auto flex w-fit max-w-[920px] gap-2">
           {images.map((image, i) => {
             const active = i === index;
             return (
@@ -177,6 +178,7 @@ function Filmstrip({
           })}
         </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);