From 9262f92bffd886d0684eb0c1a2f49f3fe1325168 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat <43230886+MyPrototypeWhat@users.noreply.github.com> Date: Wed, 14 May 2025 23:44:48 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20update=20ImageBlockGroup=20layout?= =?UTF-8?q?=20to=20use=20CSS=20grid=20for=20better=20re=E2=80=A6=20(#5998)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor: update ImageBlockGroup layout to use CSS grid for better responsiveness --- .../src/pages/home/Messages/Blocks/index.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/renderer/src/pages/home/Messages/Blocks/index.tsx b/src/renderer/src/pages/home/Messages/Blocks/index.tsx index c7233089bc..4f5350be3c 100644 --- a/src/renderer/src/pages/home/Messages/Blocks/index.tsx +++ b/src/renderer/src/pages/home/Messages/Blocks/index.tsx @@ -162,15 +162,19 @@ const MessageBlockRenderer: React.FC = ({ 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; + } + } `