Fix mobile tool preview overflow

2026-05-23 19:54:15 +08:00
parent 238dbb507e
commit 5bdaa0987a
2 changed files with 34 additions and 10 deletions
@@ -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%);
  }
 }

@@ -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 {