From e3d069e49fba92e89863e9a25884eabaa33c4d52 Mon Sep 17 00:00:00 2001 From: kanban Date: Thu, 11 Jun 2026 18:25:38 +0800 Subject: [PATCH] fix(chat): remove 75% cap on text bubble and add outer margin TextBubble now fills the available half-row width instead of being capped at 75%. Add 16px margin on the avatar-side edge (margin-left for AI, margin-right for user) so short messages still feel airy and long messages are no longer artificially clipped. Co-Authored-By: Claude --- src/app/chat/components/text-bubble.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/chat/components/text-bubble.module.css b/src/app/chat/components/text-bubble.module.css index 6c0efc14..c3af1c58 100644 --- a/src/app/chat/components/text-bubble.module.css +++ b/src/app/chat/components/text-bubble.module.css @@ -1,11 +1,11 @@ /* TextBubble 文字气泡样式 */ .bubble { - /* 撑满父（cap by max-width: 75%）—— 让文字装满宽度再换行 */ + /* 撑满父（MessageContent column 宽）—— 让气泡占满所在半区 */ width: 100%; + align-self: stretch; padding: var(--spacing-3, 12px) var(--spacing-4, 16px); border-radius: var(--radius-xxl, 24px); - max-width: 75%; font-size: var(--font-size-body-lg, 16px); line-height: 1.45; white-space: pre-wrap; @@ -17,8 +17,8 @@ background: #fff; color: var(--color-text-foreground, #000); border-top-left-radius: 0; - /* 撑满父 cross-axis（= MessageContent 宽） */ - align-self: stretch; + /* 气泡在头像侧的外侧留白 */ + margin-left: var(--spacing-4, 16px); } .bubbleUser { @@ -29,6 +29,6 @@ ); color: #fff; border-top-right-radius: 0; - /* 撑满父 cross-axis（= MessageContent 宽） */ - align-self: stretch; + /* 气泡在头像侧的外侧留白 */ + margin-right: var(--spacing-4, 16px); }