Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-30 07:39:06 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Teo 2025-07-01 10:30:51 +08:00 committed by GitHub
parent acbe8c7605
commit 1e20780c36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
View File

@ -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>

6
src/renderer/src/pages/home/Messages/Blocks/index.tsx
View File

@ -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;
`