fix(chat): improve text bubble layout to fill width and prevent overflow

src/app/chat/components/message-content.tsx

@@ -29,9 +29,12 @@ export function MessageContent({ content, imageUrl, isFromAI }: MessageContentPr
       style={{
         display: "flex",
         flexDirection: "column",
+        // **关键**：在 row flex 父中撑开（不依赖 content 循环）—— 让 TextBubble 能拿到真实宽度
+        flex: "1 1 0",
+        // 防超长 content（图片 / 超长 url）撑爆父
+        minWidth: 0,
         alignItems: isFromAI ? "flex-start" : "flex-end",
         gap: 8,
-        maxWidth: "100%",
       }}
     >
       {hasImage && imageUrl && <ImageBubble imageUrl={imageUrl} />}

src/app/chat/components/text-bubble.module.css

@@ -1,7 +1,8 @@
 /* TextBubble 文字气泡样式 */
 
 .bubble {
-  display: inline-block;
+  /* 撑满父（cap by max-width: 75%）—— 让文字装满宽度再换行 */
+  width: 100%;
   padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
   border-radius: var(--radius-xxl, 24px);
   max-width: 75%;
@@ -16,6 +17,8 @@
   background: #fff;
   color: var(--color-text-foreground, #000);
   border-top-left-radius: 0;
+  /* 撑满父 cross-axis（= MessageContent 宽） */
+  align-self: stretch;
 }
 
 .bubbleUser {
@@ -26,4 +29,6 @@
   );
   color: #fff;
   border-top-right-radius: 0;
+  /* 撑满父 cross-axis（= MessageContent 宽） */
+  align-self: stretch;
 }