From 3c902b4599255485f04f4f60b27f44172512fcca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=82=A0=E7=84=B6?=
 <111393157+West-Pavilion@users.noreply.github.com>
Date: Sat, 14 Mar 2026 21:56:37 +0800
Subject: [PATCH] fix: improve the responsive design when toc title exists
 (#1491)

---
 src/components/sessions/SessionManagerPage.tsx | 6 +++---
 src/components/sessions/SessionMessageItem.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/sessions/SessionManagerPage.tsx b/src/components/sessions/SessionManagerPage.tsx
index 9db70d5fb..296caf968 100644
--- a/src/components/sessions/SessionManagerPage.tsx
+++ b/src/components/sessions/SessionManagerPage.tsx
@@ -606,10 +606,10 @@ export function SessionManagerPage({ appId }: { appId: string }) {
 
                   {/* 消息列表区域 */}
                   <CardContent className="flex-1 overflow-hidden p-0">
-                    <div className="flex h-full">
+                    <div className="flex h-full min-w-0">
                       {/* 消息列表 */}
-                      <ScrollArea className="flex-1">
-                        <div className="p-4">
+                      <ScrollArea className="flex-1 min-w-0">
+                        <div className="p-4 min-w-0">
                           <div className="flex items-center gap-2 mb-3">
                             <MessageSquare className="size-4 text-muted-foreground" />
                             <span className="text-sm font-medium">
diff --git a/src/components/sessions/SessionMessageItem.tsx b/src/components/sessions/SessionMessageItem.tsx
index 010f9f74e..2293241bf 100644
--- a/src/components/sessions/SessionMessageItem.tsx
+++ b/src/components/sessions/SessionMessageItem.tsx
@@ -31,7 +31,7 @@ export function SessionMessageItem({
     <div
       ref={setRef}
       className={cn(
-        "rounded-lg border px-3 py-2.5 relative group transition-all",
+        "rounded-lg border px-3 py-2.5 relative group transition-all min-w-0",
         message.role.toLowerCase() === "user"
           ? "bg-primary/5 border-primary/20 ml-8"
           : message.role.toLowerCase() === "assistant"
@@ -67,7 +67,7 @@ export function SessionMessageItem({
           </span>
         )}
       </div>
-      <div className="whitespace-pre-wrap text-sm leading-relaxed">
+      <div className="whitespace-pre-wrap break-words [overflow-wrap:anywhere] text-sm leading-relaxed min-w-0">
         {message.content}
       </div>
     </div>