From 1e20780c366d6b0944441a3def1154352ec82179 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Tue, 1 Jul 2025 10:30:51 +0800
Subject: [PATCH] refactor(Messages): enhance ImageBlockGroup to dynamically
 adjust grid columns based on block count (#7678)

* refactor(Messages): enhance ImageBlockGroup to dynamically adjust grid columns based on block count

* fix(ImageBlock): update maxHeight style to use responsive value for better layout
---
 src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx | 2 +-
 src/renderer/src/pages/home/Messages/Blocks/index.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
index db4b35efa8..eeafa559a9 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
@@ -23,7 +23,7 @@ const ImageBlock: React.FC<Props> = ({ block }) => {
           <ImageViewer
             src={src}
             key={`image-${index}`}
-            style={{ maxWidth: 500, maxHeight: 500, padding: 0, borderRadius: 8 }}
+            style={{ maxWidth: 500, maxHeight: 'min(500px, 50vh)', padding: 0, borderRadius: 8 }}
           />
         ))}
       </Container>
diff --git a/src/renderer/src/pages/home/Messages/Blocks/index.tsx b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
index 9f4d6e838a..ed6d742e8e 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/index.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
@@ -86,7 +86,7 @@ const MessageBlockRenderer: React.FC<Props> = ({ blocks, message }) => {
           const groupKey = block.map((imageBlock) => imageBlock.id).join('-')
           return (
             <AnimatedBlockWrapper key={groupKey} enableAnimation={message.status.includes('ing')}>
-              <ImageBlockGroup>
+              <ImageBlockGroup count={block.length}>
                 {block.map((imageBlock) => (
                   <ImageBlock key={imageBlock.id} block={imageBlock as ImageMessageBlock} />
                 ))}
@@ -162,9 +162,9 @@ const MessageBlockRenderer: React.FC<Props> = ({ blocks, message }) => {
 
 export default React.memo(MessageBlockRenderer)
 
-const ImageBlockGroup = styled.div`
+const ImageBlockGroup = styled.div<{ count: number }>`
   display: grid;
-  grid-template-columns: repeat(3, minmax(200px, 1fr));
+  grid-template-columns: repeat(${({ count }) => Math.min(count, 3)}, minmax(200px, 1fr));
   gap: 8px;
   max-width: 960px;
 `