From b712021c954d7ce33b637a3c0969ca666cc4e8e0 Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Wed, 4 Jun 2025 19:56:31 +0800
Subject: [PATCH] fix: codeblock overflow in bubble style (#6773)

* refactor: revert CodeBlockView style change

* fix: codeblock width and overflow

* refactor: improve CodeEditor border

* revert: context-menu-container width for message group
---
 src/renderer/src/assets/styles/container.scss            | 4 ++++
 src/renderer/src/assets/styles/markdown.scss             | 7 ++++++-
 .../src/components/CodeBlockView/CodePreview.tsx         | 6 ++----
 src/renderer/src/components/CodeBlockView/index.tsx      | 9 +++------
 src/renderer/src/components/CodeEditor/index.tsx         | 5 ++---
 src/renderer/src/pages/home/Messages/Message.tsx         | 2 +-
 src/renderer/src/pages/home/Messages/MessageSelect.tsx   | 1 +
 7 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/assets/styles/container.scss b/src/renderer/src/assets/styles/container.scss
index aa05ce010c..ab5e8a7de8 100644
--- a/src/renderer/src/assets/styles/container.scss
+++ b/src/renderer/src/assets/styles/container.scss
@@ -10,3 +10,7 @@
     width: 100%;
   }
 }
+
+.context-menu-container {
+  max-width: 100%;
+}
diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss
index 86318ada33..569fa9f1dd 100644
--- a/src/renderer/src/assets/styles/markdown.scss
+++ b/src/renderer/src/assets/styles/markdown.scss
@@ -306,9 +306,14 @@ mjx-container {
 
 /* CodeMirror 相关样式 */
 .cm-editor {
+  border-radius: 5px;
+
+  &.cm-focused {
+    outline: none;
+  }
+
   .cm-scroller {
     font-family: var(--code-font-family);
-    padding: 1px;
     border-radius: 5px;
 
     .cm-gutters {
diff --git a/src/renderer/src/components/CodeBlockView/CodePreview.tsx b/src/renderer/src/components/CodeBlockView/CodePreview.tsx
index 1e24800789..c0ebcd9a7e 100644
--- a/src/renderer/src/components/CodeBlockView/CodePreview.tsx
+++ b/src/renderer/src/components/CodeBlockView/CodePreview.tsx
@@ -231,7 +231,6 @@ const ContentContainer = styled.div<{
   $wrap: boolean
   $fadeIn: boolean
 }>`
-  display: block;
   position: relative;
   overflow: auto;
   border: 0.5px solid transparent;
@@ -239,12 +238,11 @@ const ContentContainer = styled.div<{
   margin-top: 0;
 
   .shiki {
-    display: flex;
-    min-width: 100%;
     padding: 1em;
 
     code {
-      display: block;
+      display: flex;
+      flex-direction: column;
 
       .line {
         display: block;
diff --git a/src/renderer/src/components/CodeBlockView/index.tsx b/src/renderer/src/components/CodeBlockView/index.tsx
index 6d404dadab..944e6f66e3 100644
--- a/src/renderer/src/components/CodeBlockView/index.tsx
+++ b/src/renderer/src/components/CodeBlockView/index.tsx
@@ -249,8 +249,8 @@ const CodeBlockView: React.FC<Props> = ({ children, language, onSave }) => {
 }
 
 const CodeBlockWrapper = styled.div<{ $isInSpecialView: boolean }>`
-  /* FIXME: 在 bubble style 中撑开一些宽度*/
   position: relative;
+  width: 100%;
 
   .code-toolbar {
     background-color: ${(props) => (props.$isInSpecialView ? 'transparent' : 'var(--color-background-mute)')};
@@ -285,13 +285,10 @@ const CodeHeader = styled.div<{ $isInSpecialView: boolean }>`
 
 const SplitViewWrapper = styled.div`
   display: flex;
-  width: 100%;
 
   > * {
-    flex: 1 1 0;
-    width: 0;
-    min-width: 0;
-    max-width: 100%;
+    flex: 1 1 auto;
+    width: 100%;
   }
 `
 
diff --git a/src/renderer/src/components/CodeEditor/index.tsx b/src/renderer/src/components/CodeEditor/index.tsx
index 956a66b0f1..c10fc5e8ab 100644
--- a/src/renderer/src/components/CodeEditor/index.tsx
+++ b/src/renderer/src/components/CodeEditor/index.tsx
@@ -224,11 +224,10 @@ const CodeEditor = ({
         ...customBasicSetup // override basicSetup
       }}
       style={{
+        ...style,
         fontSize: `${fontSize - 1}px`,
         border: '0.5px solid transparent',
-        borderRadius: '5px',
-        marginTop: 0,
-        ...style
+        marginTop: 0
       }}
     />
   )
diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 6f0a362b9f..8648150452 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -7,6 +7,7 @@ import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { getMessageModelId } from '@renderer/services/MessagesService'
 import { getModelUniqId } from '@renderer/services/ModelService'
+import { estimateMessageUsage } from '@renderer/services/TokenService'
 import { Assistant, Topic } from '@renderer/types'
 import type { Message, MessageBlock } from '@renderer/types/newMessage'
 import { classNames } from '@renderer/utils'
@@ -21,7 +22,6 @@ import MessageErrorBoundary from './MessageErrorBoundary'
 import MessageHeader from './MessageHeader'
 import MessageMenubar from './MessageMenubar'
 import MessageTokens from './MessageTokens'
-import { estimateMessageUsage } from '@renderer/services/TokenService'
 
 interface Props {
   message: Message
diff --git a/src/renderer/src/pages/home/Messages/MessageSelect.tsx b/src/renderer/src/pages/home/Messages/MessageSelect.tsx
index 88ffeb7f41..d3d67fb7f0 100644
--- a/src/renderer/src/pages/home/Messages/MessageSelect.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageSelect.tsx
@@ -59,6 +59,7 @@ const CheckboxWrapper = styled.div`
 
 const MessageContent = styled.div<{ isMultiSelectMode: boolean }>`
   flex: 1;
+  min-width: 0;
   ${(props) => props.isMultiSelectMode && 'margin-left: 8px;'}
 `