fix: chat UI fix for media

components/chat/media-lightbox.tsx

@@ -7,9 +7,16 @@
  * comes free on touch, the scrollbar reflects position, and the browser handles
  * momentum. Arrow keys and the on-screen buttons scroll to a slide rather than
  * setting state, so every input path drives the same mechanism.
+ *
+ * Portalled to <body>, and that is load-bearing rather than tidiness: every
+ * bubble sits inside MessageGestures, which sets a transform for swipe-to-reply
+ * — and a transformed ancestor becomes the containing block for `position:
+ * fixed`. Rendered in place, `inset-0` would resolve against the bubble, and
+ * the message list's overflow would then clip it.
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { ChevronLeft, ChevronRight, Download, Loader2, X } from "lucide-react";
 import { toast } from "sonner";
 import { attachmentUrl, type Attachment } from "@/lib/chat";
@@ -53,6 +60,16 @@ export function MediaLightbox({
     return () => window.removeEventListener("keydown", onKey);
   }, [index, items.length, onClose, scrollTo]);
 
+  // A full-screen viewer over a scrollable thread: without this the thread
+  // scrolls behind the image once the carousel reaches its own edge.
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
   const current = items[index];
 
   /**
@@ -85,8 +102,10 @@ export function MediaLightbox({
     }
   };
 
-  return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-black/95">
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex flex-col bg-black/95">
       <div className="flex items-center justify-between gap-2 px-3 py-2 text-white">
         <button
           type="button"
@@ -167,7 +186,8 @@ export function MediaLightbox({
           </>
         )}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }