From 5bdaa0987a70fbdcddf48a681a227e61bc7c9dc8 Mon Sep 17 00:00:00 2001
From: ekko <fqsy1416@gmail.com>
Date: Sat, 23 May 2026 19:54:15 +0800
Subject: [PATCH] Fix mobile tool preview overflow

---
 .../components/hermes/chat/MessageItem.vue    | 22 ++++++++++++++-----
 .../hermes/group-chat/GroupMessageItem.vue    | 22 ++++++++++++++-----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/hermes/chat/MessageItem.vue b/packages/client/src/components/hermes/chat/MessageItem.vue
index 685891d..3f1982a 100644
--- a/packages/client/src/components/hermes/chat/MessageItem.vue
+++ b/packages/client/src/components/hermes/chat/MessageItem.vue
@@ -1003,6 +1003,8 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   position: relative;
+  min-width: 0;
+  max-width: 100%;
 
   &.user {
     align-items: flex-end;
@@ -1457,6 +1459,9 @@ onBeforeUnmount(() => {
   color: $text-muted;
   padding: 2px 4px;
   border-radius: $radius-sm;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
 
   &.expandable {
     cursor: pointer;
@@ -1468,14 +1473,21 @@ onBeforeUnmount(() => {
 
   .tool-name {
     font-family: $font-code;
-    flex-shrink: 0;
-  }
-
-  .tool-preview {
+    flex: 0 1 auto;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 400px;
+  }
+
+  .tool-preview {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: min(400px, 100%);
   }
 }
 
diff --git a/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue b/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue
index 6922899..38939c7 100644
--- a/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupMessageItem.vue
@@ -538,6 +538,8 @@ onBeforeUnmount(() => {
     display: flex;
     gap: 10px;
     padding: 2px 0;
+    min-width: 0;
+    max-width: 100%;
 
     &.self {
         flex-direction: row-reverse;
@@ -586,6 +588,9 @@ onBeforeUnmount(() => {
     border-radius: $radius-sm;
     color: $text-muted;
     font-size: 11px;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
 
     &.expandable {
         cursor: pointer;
@@ -612,17 +617,24 @@ onBeforeUnmount(() => {
 }
 
 .tool-name {
-    flex-shrink: 0;
+    flex: 0 1 auto;
+    min-width: 0;
     font-family: $font-code;
     color: $text-muted;
     font-weight: 400;
-}
-
-.tool-preview {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 400px;
+}
+
+.tool-preview {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: min(400px, 100%);
 }
 
 .tool-spinner {