From abbafe29a1d09104bd11094208c56dde1856ad7b Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 21 May 2025 13:57:39 +0800
Subject: [PATCH] fix: message content width will exceed the bubble limit in
 narrow layout mode

---
 src/renderer/src/pages/home/Messages/Message.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 014aa26282..c2ff982226 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -51,7 +51,7 @@ const MessageItem: FC<Props> = ({
   const { assistant, setModel } = useAssistant(message.assistantId)
   const model = useModel(getMessageModelId(message), message.model?.provider) || message.model
   const { isBubbleStyle } = useMessageStyle()
-  const { showMessageDivider, messageFont, fontSize } = useSettings()
+  const { showMessageDivider, messageFont, fontSize, narrowMode } = useSettings()
   const { editMessageBlocks, resendUserMessageWithEdit } = useMessageOperations(topic)
   const messageContainerRef = useRef<HTMLDivElement>(null)
   const { editingMessageId, stopEditing } = useMessageEditing()
@@ -126,9 +126,7 @@ const MessageItem: FC<Props> = ({
 
   if (message.type === 'clear') {
     return (
-      <NewContextMessage
-        className="clear-context-divider"
-        onClick={() => EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)}>
+      <NewContextMessage className="clear-context-divider" onClick={() => EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)}>
         <Divider dashed style={{ padding: '0 20px' }} plain>
           {t('chat.message.new.context')}
         </Divider>
@@ -160,7 +158,8 @@ const MessageItem: FC<Props> = ({
             fontFamily: messageFont === 'serif' ? 'var(--font-family-serif)' : 'var(--font-family)',
             fontSize,
             background: messageBackground,
-            overflowY: 'visible'
+            overflowY: 'visible',
+            maxWidth: narrowMode ? 760 : undefined
           }}>
           {isEditing ? (
             <MessageEditor