From 5cdf4eff775cafc7cd80b2f898a96f67b3d861ac Mon Sep 17 00:00:00 2001
From: Yuzhong Zhang <141388234+BetterAndBetterII@users.noreply.github.com>
Date: Thu, 3 Apr 2025 01:01:04 +0800
Subject: [PATCH] fix(CodeBlock): incorrect behavior of message in multiple
 models (#4328)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 修复多模型对比时的复制按钮sticky行为，并添加注释

* 同时修复横向滚动条消失的问题

* 增加布局判断
---
 .../src/pages/home/Messages/MessageGroup.tsx     | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
index e43a7aab..9f39cb9b 100644
--- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
@@ -262,7 +262,6 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
   width: 100%;
   display: grid;
   gap: ${({ $layout }) => ($layout === 'horizontal' ? '16px' : '0')};
-  overflow-y: auto;
   grid-template-columns: repeat(
     ${({ $layout, $count }) => (['fold', 'vertical'].includes($layout) ? 1 : $count)},
     minmax(550px, 1fr)
@@ -286,7 +285,13 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
       grid-template-rows: auto;
       gap: 16px;
     `}
-  overflow-y: visible;
+  ${({ $layout }) => {
+    return $layout === 'horizontal'
+      ? css`
+          overflow-y: auto;
+        `
+      : 'overflow-y: visible;'
+  }}
 `
 
 interface MessageWrapperProps {
@@ -325,17 +330,20 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
   }}
 
   ${({ $layout, $isInPopover, $isGrouped }) => {
+    // 如果布局是grid，并且是组消息，则设置最大高度和溢出行为（卡片不可滚动，点击展开后可滚动）
+    // 如果布局是horizontal，则设置溢出行为（卡片可滚动）
+    // 如果布局是fold、vertical，高度不限制，与正常消息流布局一致，则设置卡片不可滚动（visible）
     return $layout === 'grid' && $isGrouped
       ? css`
           max-height: ${$isInPopover ? '50vh' : '300px'};
-          overflow-y: ${$isInPopover ? 'visible' : 'hidden'};
+          overflow-y: ${$isInPopover ? 'auto' : 'hidden'};
           border: 0.5px solid ${$isInPopover ? 'transparent' : 'var(--color-border)'};
           padding: 10px;
           border-radius: 6px;
           background-color: var(--color-background);
         `
       : css`
-          overflow-y: visible;
+          overflow-y: ${$layout === 'horizontal' ? 'auto' : 'visible'};
           border-radius: 6px;
         `
   }}