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}