Fix mobile tool preview overflow

This commit is contained in:
ekko
2026-05-23 19:54:15 +08:00
committed by ekko
parent 238dbb507e
commit 5bdaa0987a
2 changed files with 34 additions and 10 deletions
@@ -1003,6 +1003,8 @@ onBeforeUnmount(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
min-width: 0;
max-width: 100%;
&.user { &.user {
align-items: flex-end; align-items: flex-end;
@@ -1457,6 +1459,9 @@ onBeforeUnmount(() => {
color: $text-muted; color: $text-muted;
padding: 2px 4px; padding: 2px 4px;
border-radius: $radius-sm; border-radius: $radius-sm;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
&.expandable { &.expandable {
cursor: pointer; cursor: pointer;
@@ -1468,14 +1473,21 @@ onBeforeUnmount(() => {
.tool-name { .tool-name {
font-family: $font-code; font-family: $font-code;
flex-shrink: 0; flex: 0 1 auto;
} min-width: 0;
.tool-preview {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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; display: flex;
gap: 10px; gap: 10px;
padding: 2px 0; padding: 2px 0;
min-width: 0;
max-width: 100%;
&.self { &.self {
flex-direction: row-reverse; flex-direction: row-reverse;
@@ -586,6 +588,9 @@ onBeforeUnmount(() => {
border-radius: $radius-sm; border-radius: $radius-sm;
color: $text-muted; color: $text-muted;
font-size: 11px; font-size: 11px;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
&.expandable { &.expandable {
cursor: pointer; cursor: pointer;
@@ -612,17 +617,24 @@ onBeforeUnmount(() => {
} }
.tool-name { .tool-name {
flex-shrink: 0; flex: 0 1 auto;
min-width: 0;
font-family: $font-code; font-family: $font-code;
color: $text-muted; color: $text-muted;
font-weight: 400; font-weight: 400;
}
.tool-preview {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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 { .tool-spinner {