fix: chat UI fix for media

components/chat/media-grid.tsx

@@ -37,7 +37,10 @@ export function MediaGrid({
         onClick={() => onOpen(0)}
         className="block overflow-hidden rounded-lg"
       >
-        <Tile item={items[0]} className="max-h-72 w-auto" />
+        <Tile
+          item={items[0]}
+          className="max-h-64 w-auto sm:max-h-52 sm:max-w-52"
+        />
       </button>
     );
   }
@@ -46,7 +49,7 @@ export function MediaGrid({
     // Two columns throughout: two items make a row, three or four make the
     // 2×2. A three-item grid deliberately leaves the fourth cell empty rather
     // than stretching one tile — an uneven crop reads worse than a gap.
-    <div className="grid w-56 grid-cols-2 gap-0.5 overflow-hidden rounded-lg sm:w-64">
+    <div className="grid w-56 grid-cols-2 gap-0.5 overflow-hidden rounded-lg sm:w-52">
       {visible.map((item, i) => {
         const isLast = i === visible.length - 1;
         return (

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,
   );
 }
 

components/chat/message-group.tsx

@@ -54,6 +54,22 @@ function isStickerOnly(m: ChatMessage): boolean {
   return !m.body && atts.length > 0 && atts.every((a) => a.kind === "sticker");
 }
 
+/** True when a message carries photos or video. */
+function carriesMedia(m: ChatMessage): boolean {
+  return (m.attachments ?? []).some(
+    (a) => a.kind === "image" || a.kind === "video",
+  );
+}
+
+/**
+ * True when a message's content brings its own frame — a shared post card,
+ * stickers, or media. All three are images with their own edges, and a
+ * coloured bubble around them reads as a second frame.
+ */
+function rendersBare(m: ChatMessage): boolean {
+  return sharesAnEntity(m) || isStickerOnly(m) || carriesMedia(m);
+}
+
 /** Distinct emoji shown before the rest collapse into "+N". */
 const MAX_TRAIL_EMOJI = 4;
 
@@ -229,7 +245,7 @@ export function MessageGroup({
                   // own border, rounding and background, so the bubble drops
                   // its chrome rather than drawing a second frame around it.
                   // Any caption gets the padding back on its own line below.
-                  sharesAnEntity(m) || isStickerOnly(m)
+                  rendersBare(m)
                     ? "overflow-hidden bg-transparent"
                     : cn(
                         "px-3 py-2",
@@ -264,11 +280,16 @@ export function MessageGroup({
                       <span
                         className={cn(
                           "block",
-                          // The bubble gave up its padding for the card, so a
-                          // caption supplies its own.
-                          sharesAnEntity(m)
-                            ? "rounded-b-lg border border-t-0 border-border px-3 py-2"
-                            : undefined,
+                          // The bubble gave up its padding and colour, so a
+                          // caption carries its own — otherwise it would sit
+                          // as bare text on the thread background.
+                          rendersBare(m) &&
+                            cn(
+                              "mt-0.5 rounded-lg px-3 py-2",
+                              mine
+                                ? "bg-primary text-primary-foreground dark:text-white"
+                                : "bg-muted text-foreground",
+                            ),
                         )}
                       >
                         <MessageText body={m.body} entities={m.entities} />