From 33ce41704daa05892cf83d106a250d17f6e9b167 Mon Sep 17 00:00:00 2001
From: Phantom <eurfelux@gmail.com>
Date: Fri, 17 Oct 2025 20:24:13 +0800
Subject: [PATCH] fix(message): adjust layout and overflow properties for
 better display (#10746)

* style(CodeBlockView): reduce min-width from 45ch to 35ch to fix layout issues

* style(messages): adjust overflow properties and clean up commented code

Remove commented overflow properties and adjust overflow behavior for better scroll handling in message containers

* style: remove commented overflow css properties
---
 .../src/components/CodeBlockView/view.tsx     |  2 +-
 .../src/pages/home/Messages/MessageGroup.tsx  | 21 +++----------------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/components/CodeBlockView/view.tsx b/src/renderer/src/components/CodeBlockView/view.tsx
index a89e545bc..939095262 100644
--- a/src/renderer/src/components/CodeBlockView/view.tsx
+++ b/src/renderer/src/components/CodeBlockView/view.tsx
@@ -326,7 +326,7 @@ const CodeBlockWrapper = styled.div<{ $isInSpecialView: boolean }>`
    * 一是 CodeViewer 在气泡样式下的用户消息中无法撑开气泡，
    * 二是 代码块内容过少时 toolbar 会和 title 重叠。
    */
-  min-width: 45ch;
+  min-width: 35ch;
 
   .code-toolbar {
     background-color: ${(props) => (props.$isInSpecialView ? 'transparent' : 'var(--color-background-mute)')};
diff --git a/src/renderer/src/pages/home/Messages/MessageGroup.tsx b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
index 223124f3b..fde7ccd13 100644
--- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageGroup.tsx
@@ -337,29 +337,18 @@ const GroupContainer = styled.div`
 const GridContainer = styled(Scrollbar)<{ $count: number; $gridColumns: number }>`
   width: 100%;
   display: grid;
+  overflow-y: visible;
   gap: 16px;
 
   &.horizontal {
     padding-bottom: 4px;
     grid-template-columns: repeat(${({ $count }) => $count}, minmax(420px, 1fr));
-    overflow-y: hidden;
     overflow-x: auto;
-    &::-webkit-scrollbar {
-      height: 6px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--color-scrollbar-thumb);
-      border-radius: var(--scrollbar-thumb-radius);
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: var(--color-scrollbar-thumb-hover);
-    }
   }
   &.fold,
   &.vertical {
     grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 8px;
-    overflow: hidden;
   }
   &.grid {
     grid-template-columns: repeat(
@@ -367,15 +356,11 @@ const GridContainer = styled(Scrollbar)<{ $count: number; $gridColumns: number }
       minmax(0, 1fr)
     );
     grid-template-rows: auto;
-    overflow-y: auto;
-    overflow-x: hidden;
   }
 
   &.multi-select-mode {
     grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 10px;
-    overflow-y: auto;
-    overflow-x: hidden;
     .grid {
       height: auto;
     }
@@ -401,7 +386,7 @@ interface MessageWrapperProps {
 const MessageWrapper = styled.div<MessageWrapperProps>`
   &.horizontal {
     padding: 1px;
-    /* overflow-y: auto; */
+    overflow-y: auto;
     .message {
       height: 100%;
       border: 0.5px solid var(--color-border);
@@ -423,7 +408,7 @@ const MessageWrapper = styled.div<MessageWrapperProps>`
   &.grid {
     display: block;
     height: 300px;
-    overflow: hidden;
+    overflow-y: hidden;
     border: 0.5px solid var(--color-border);
     border-radius: 10px;
     cursor: pointer;