fix: improve the responsive design when toc title exists (#1491)

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">

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>