From 97b13b7697f982a8dfb6ebe7fd7b540861e75dd9 Mon Sep 17 00:00:00 2001
From: clover caruso <git@paperclover.net>
Date: Fri, 16 Oct 2026 12:17:18 -0700
Subject: [PATCH] fix: wrap image batches across the message width

Clover wants large image batches to use the chat bubble width instead of stacking two narrow thumbnails per row. Expand batches above two media items into a responsive wrapping grid while retaining existing image controls, order, and small-batch sizing.

Assisted-by: gpt-6.1-sol
---
 .../src/components/chat/MessagesTimeline.tsx    | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index c4085341a511b250fc73e8bec31e7c942b4ff50f..b410e18de850de7591ed61ac52ba9d41f64f9825 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2324,6 +2324,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
     }),
   );
   const regularImages = userImages.filter((image) => !image.name.startsWith("preview-annotation-"));
+  const hasMediaGrid = regularImages.length + userVideos.length > 2;
   const unchippedFiles = otherUserFiles.filter((file) => !chippedAttachmentIds.has(file.id));
   const annotationRecordIds = useMemo(
     () =>
@@ -2487,10 +2488,22 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
       {row.message.inputIntent && row.message.inputIntent !== "turn_start" ? (
         <UserMessageIntentMarker intent={row.message.inputIntent} />
       ) : null}
-      <div className="relative max-w-[80%] rounded-2xl bg-message p-3 text-message-foreground">
+      <div
+        className={cn(
+          "relative max-w-[80%] rounded-2xl bg-message p-3 text-message-foreground",
+          hasMediaGrid && "w-[80%]",
+        )}
+      >
         <MessageAuthorHeading>You</MessageAuthorHeading>
         {(regularImages.length > 0 || userVideos.length > 0) && (
-          <div className="mb-2 grid max-w-[210px] grid-cols-2 gap-2">
+          <div
+            className={cn(
+              "mb-2 grid gap-2",
+              hasMediaGrid
+                ? "grid-cols-[repeat(auto-fit,minmax(min(100%,100px),1fr))]"
+                : "max-w-[210px] grid-cols-2",
+            )}
+          >
             {regularImages.map((image) => (
               <div
                 key={image.id}
-- 
2.54.0