Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 11:44:28 +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 596532a8c8
commit 9262f92bff
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)
const ImageBlockGroup = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
gap: 8px;
width: 100%;
margin: 8px 0;
max-width: 960px;
> * {
flex: 0 0 auto;
min-width: 200px;
}
@media (min-width: 1536px) {
grid-template-columns: repeat(4, minmax(250px, 1fr));
max-width: 1280px;
> * {
min-width: 250px;
}
}
`