From 5ca38a0eca5a3454ffae8772b314d7760c8eb98f Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 28 May 2026 18:40:17 +0800
Subject: [PATCH] fix: overlay lightbox captions without shifting image

---
 src/components/messageStream/overlays/ImageLightbox.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/messageStream/overlays/ImageLightbox.tsx b/src/components/messageStream/overlays/ImageLightbox.tsx
index a9aaa3a..eaacad2 100644
--- a/src/components/messageStream/overlays/ImageLightbox.tsx
+++ b/src/components/messageStream/overlays/ImageLightbox.tsx
@@ -169,11 +169,7 @@ function LightboxView({
         </>
       ) : null}
 
-      <div
-        className={`flex min-h-0 w-full flex-1 items-center justify-center px-4 pt-16 ${
-          showCaption ? "pb-3" : "pb-16"
-        }`}
-      >
+      <div className="flex min-h-0 w-full flex-1 items-center justify-center px-4 py-16">
         <div
           className="flex h-full w-full items-center justify-center"
           onClick={(e) => {
@@ -204,7 +200,7 @@ function LightboxView({
 
       {showCaption ? (
         <div
-          className="shrink-0 border-t border-white/10 bg-gradient-to-t from-black via-black/90 to-black/70 px-4 py-4 text-sm leading-snug text-white sm:px-6"
+          className="absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black via-black/90 to-black/70 px-4 py-4 text-sm leading-snug text-white sm:px-6"
           onClick={(e) => e.stopPropagation()}
         >
           <div className="message-stream-copyable-text mx-auto max-h-[32vh] max-w-[920px] overflow-y-auto whitespace-pre-wrap break-words [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">