Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-06 13:19:33 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: update ImageBlockGroup layout to use CSS grid for better re… (#5998)

Browse Source 
refactor: update ImageBlockGroup layout to use CSS grid for better responsiveness
This commit is contained in:
MyPrototypeWhat 2025-05-14 23:44:48 +08:00 committed by GitHub
parent 33b28d783a
commit 928530c6f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,15 +162,19 @@ const MessageBlockRenderer: React.FC<Props> = ({ blocks, message }) => {
export default React.memo(MessageBlockRenderer) export default React.memo(MessageBlockRenderer)
const ImageBlockGroup = styled.div` const ImageBlockGroup = styled.div`
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(3, minmax(200px, 1fr));
justify-content: flex-start;
align-items: center;
gap: 8px; gap: 8px;
width: 100%; width: 100%;
margin: 8px 0; max-width: 960px;
> * { > * {
flex: 0 0 auto;
min-width: 200px; min-width: 200px;
} }
@media (min-width: 1536px) {
grid-template-columns: repeat(4, minmax(250px, 1fr));
max-width: 1280px;
> * {
min-width: 250px;
}
}
` `