feat(FN-3602): compact mobile chat tool-call density and layout

Merged FN-3602: Compact tool-call summaries in the ChatView with responsive mobile layout improvements, including new regression tests and documentation in the dashboard guide.

Fusion-Task-Id: FN-3602
This commit is contained in:
Fusion
2026-05-06 13:51:44 -07:00
committed by gsxdsm
parent 79186c5e04
commit fbdfc5beda
6 changed files with 91 additions and 17 deletions

View File

@@ -501,10 +501,10 @@
.chat-tool-calls-group-summary {
display: flex;
align-items: center;
gap: var(--space-sm);
gap: var(--space-xs);
list-style: none;
cursor: pointer;
padding: var(--space-xs) var(--space-sm);
padding: var(--space-xs);
color: var(--text-muted);
border-radius: var(--radius-sm);
font-size: var(--space-md);
@@ -524,13 +524,18 @@
box-shadow: var(--focus-ring-strong);
}
.chat-tool-calls-count {
white-space: nowrap;
flex-shrink: 0;
}
.chat-tool-calls-names {
color: var(--text-dim);
font-family: var(--font-mono, monospace);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
flex: 1 1 auto;
min-width: 0;
font-size: 0.6875rem;
}
@@ -543,11 +548,11 @@
}
.chat-tool-calls-group > .chat-tool-call {
margin: 0 var(--space-sm) var(--space-xs) var(--space-sm);
margin: 0 var(--space-xs) var(--space-xs);
}
.chat-tool-calls-group > .chat-tool-call:last-child {
margin-bottom: var(--space-sm);
margin-bottom: var(--space-xs);
}
.chat-tool-call {
@@ -562,7 +567,7 @@
gap: var(--space-xs);
list-style: none;
cursor: pointer;
padding: var(--space-xs) var(--space-sm);
padding: var(--space-xs);
color: var(--text-muted);
border-radius: var(--radius-sm);
font-size: var(--space-md);
@@ -592,7 +597,11 @@
.chat-tool-call-name {
font-family: var(--font-mono, monospace);
flex-shrink: 0;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-tool-call-preview {
@@ -612,7 +621,7 @@
}
.chat-tool-call-content {
margin: var(--space-xs) var(--space-sm) var(--space-sm);
margin: var(--space-xs);
padding: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--bg);
@@ -1106,13 +1115,24 @@
opacity: 1;
}
.chat-tool-calls-group-summary {
flex-direction: column;
align-items: flex-start;
.chat-tool-calls-group-summary,
.chat-tool-call summary {
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
}
.chat-tool-calls-group-status {
justify-content: flex-start;
.chat-tool-calls-names,
.chat-tool-call-name,
.chat-tool-call-status-text,
.chat-tool-calls-group-status,
.chat-tool-calls-count {
white-space: nowrap;
}
.chat-tool-calls-group-status,
.chat-tool-call-status-text {
margin-left: auto;
}
.chat-attach-btn,