From 042635528a98481a6ba03849d829bbc0278a6969 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 18:11:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=81=AF=E7=AE=B1=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E3=80=81=E5=BA=95=E9=83=A8=E7=BC=A9=E7=95=A5?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=85=E4=B8=AD=E3=80=81=E5=85=B3=E9=97=AD=E5=90=8E?=
 =?UTF-8?q?=E4=BF=9D=E7=95=99=E6=BB=9A=E5=8A=A8=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../messageStream/overlays/ImageLightbox.tsx  | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

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()}
     >
-      <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">
-        {images.map((image, i) => {
-          const active = i === index;
-          return (
-            <button
-              key={image.id}
-              ref={active ? activeRef : null}
-              type="button"
-              onClick={(e) => {
-                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
-                  ? "opacity-100 ring-2 ring-white"
-                  : "opacity-45 hover:opacity-80"
-              }`}
-              aria-label={`Image ${i + 1}`}
-              aria-current={active}
-            >
-              <BubbleImage
-                src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
-                fallbackSrc={[image.thumbUrl, image.url]}
-                className="h-full w-full object-cover"
-              />
-            </button>
-          );
-        })}
+      <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 (
+              <button
+                key={image.id}
+                ref={active ? activeRef : null}
+                type="button"
+                onClick={(e) => {
+                  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
+                    ? "opacity-100 ring-2 ring-white"
+                    : "opacity-45 hover:opacity-80"
+                }`}
+                aria-label={`Image ${i + 1}`}
+                aria-current={active}
+              >
+                <BubbleImage
+                  src={image.thumbnailUrl ?? image.thumbUrl ?? image.url}
+                  fallbackSrc={[image.thumbUrl, image.url]}
+                  className="h-full w-full object-cover"
+                />
+              </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);