From 2220714962e5b5cb3bae080e705fda33a71b0a3c Mon Sep 17 00:00:00 2001
From: Yunxiao Xu <xuyunxiao2001@gmail.com>
Date: Fri, 13 Feb 2026 04:02:38 -0800
Subject: [PATCH] feat(ux): Add size limits and improved styling for plot
 previews in chat bubbles.

---
 frontend/src/components/chat/MessageBubble.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/chat/MessageBubble.tsx b/frontend/src/components/chat/MessageBubble.tsx
index 4bf7c05..37fa3db 100644
--- a/frontend/src/components/chat/MessageBubble.tsx
+++ b/frontend/src/components/chat/MessageBubble.tsx
@@ -48,20 +48,20 @@ export function MessageBubble({ message }: MessageBubbleProps) {
         </div>
         
         {(message.plots || message.plot_ids) && ((message.plots?.length || 0) > 0 || (message.plot_ids?.length || 0) > 0) && (
-          <div className="mt-4 grid grid-cols-1 gap-2">
+          <div className="mt-4 grid grid-cols-1 gap-4">
             {message.plots?.map((plot, index) => {
               const src = `data:image/png;base64,${plot}`
               return (
                 <Button
                   key={`stream-${index}`}
                   variant="ghost"
-                  className="relative group p-0 h-auto w-full overflow-hidden hover:bg-transparent"
+                  className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white"
                   onClick={() => setSelectedPlot(src)}
                 >
                   <img
                     src={src}
                     alt="Analysis Plot"
-                    className="rounded-md border bg-white w-full h-auto transition-all group-hover:brightness-95"
+                    className="rounded-md max-h-[400px] w-auto object-contain transition-all group-hover:brightness-95"
                   />
                   <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10">
                     <Maximize2Icon className="h-6 w-6 text-white drop-shadow-md" />
@@ -75,13 +75,13 @@ export function MessageBubble({ message }: MessageBubbleProps) {
                 <Button
                   key={`history-${index}`}
                   variant="ghost"
-                  className="relative group p-0 h-auto w-full overflow-hidden hover:bg-transparent"
+                  className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white"
                   onClick={() => setSelectedPlot(src)}
                 >
                   <img
                     src={src}
                     alt="Historical Analysis Plot"
-                    className="rounded-md border bg-white w-full h-auto transition-all group-hover:brightness-95"
+                    className="rounded-md max-h-[400px] w-auto object-contain transition-all group-hover:brightness-95"
                   />
                   <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10">
                     <Maximize2Icon className="h-6 w-6 text-white drop-shadow-md" />