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

@@ -10,3 +10,7 @@
     width: 100%;
   }
 }
+
+.context-menu-container {
+  max-width: 100%;
+}

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 {

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;

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%;
   }
 `
 

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
       }}
     />
   )

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

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;'}
 `