feat: refine language menu and lightbox caption

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -121,7 +121,7 @@ function LightboxView({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/95 backdrop-blur-sm"
+      className="fixed inset-0 z-[100] flex flex-col bg-black/95 backdrop-blur-sm"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
@@ -179,42 +179,52 @@ function LightboxView({
           >
             <ChevronRight className="h-6 w-6" />
           </button>
-          <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 rounded-full bg-white/10 px-3 py-1 text-xs text-white">
+          <div className="absolute left-1/2 top-4 z-10 -translate-x-1/2 rounded-full bg-white/10 px-3 py-1 text-xs text-white">
             {index + 1} / {images.length}
           </div>
         </>
       ) : null}
 
       <div
-        className="relative inline-block max-h-[92vh] max-w-[92vw]"
-        onClick={(e) => e.stopPropagation()}
-        onTouchStart={(e) => {
-          touchStartX.current = e.touches[0].clientX;
-        }}
-        onTouchEnd={(e) => {
-          if (touchStartX.current == null) return;
-          const dx = e.changedTouches[0].clientX - touchStartX.current;
-          if (Math.abs(dx) > 40) {
-            if (dx > 0) goPrev();
-            else goNext();
-          }
-          touchStartX.current = null;
-        }}
+        className={`flex min-h-0 w-full flex-1 items-center justify-center px-4 pt-16 ${
+          caption ? "pb-3" : "pb-16"
+        }`}
       >
-        <img
-          src={current.url}
-          alt={current.filename}
-          className="max-h-[92vh] max-w-[92vw] object-contain select-none"
-          draggable={false}
-        />
-        {caption ? (
-          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent px-4 pb-4 pt-12 text-sm leading-snug text-white sm:px-5 sm:pb-5">
-            <div className="message-stream-copyable-text max-h-[32vh] overflow-y-auto whitespace-pre-wrap break-words [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              {autolink(caption)}
-            </div>
-          </div>
-        ) : null}
+        <div
+          className="max-h-full max-w-[92vw]"
+          onClick={(e) => e.stopPropagation()}
+          onTouchStart={(e) => {
+            touchStartX.current = e.touches[0].clientX;
+          }}
+          onTouchEnd={(e) => {
+            if (touchStartX.current == null) return;
+            const dx = e.changedTouches[0].clientX - touchStartX.current;
+            if (Math.abs(dx) > 40) {
+              if (dx > 0) goPrev();
+              else goNext();
+            }
+            touchStartX.current = null;
+          }}
+        >
+          <img
+            src={current.url}
+            alt={current.filename}
+            className="max-h-full max-w-[92vw] object-contain select-none"
+            draggable={false}
+          />
+        </div>
       </div>
+
+      {caption ? (
+        <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"
+          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">
+            {autolink(caption)}
+          </div>
+        </div>
+      ) : null}
     </div>,
     document.body,
   );