ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-12 21:53:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: vertically center tool summary labels

Browse Source
This commit is contained in:
Shakker
2026-05-30 19:13:57 +01:00
parent ab35dcd333
commit 54d42c7c9a
2 changed files with 59 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/styles/chat/tool-cards.css
+41 -13
View File
@@ -234,7 +234,10 @@
.chat-tool-msg-summary__error-badge {
display: inline-flex;
align-items: center;
align-self: center;
gap: 3px;
min-height: 20px;
box-sizing: border-box;
padding: 1px 6px;
margin-left: auto;
border-radius: 999px;
@@ -244,7 +247,7 @@
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
line-height: 1;
flex-shrink: 0;
}
@@ -649,17 +652,22 @@
margin-top: 6px;
}
.chat-bubble--tool-shell > .chat-tool-msg-collapse {
margin-top: 0;
}
.chat-tool-msg-summary {
display: flex;
align-items: flex-start;
align-items: center;
align-content: center;
flex-wrap: wrap;
gap: 8px;
gap: 12px;
min-width: 0;
box-sizing: border-box;
padding: 8px 11px;
cursor: pointer;
font-size: var(--control-ui-text-sm);
line-height: 1.4;
line-height: 1;
color: var(--text);
user-select: none;
list-style: none;
@@ -675,13 +683,24 @@
text-align: left;
appearance: none;
-webkit-appearance: none;
font: inherit;
font-family: inherit;
transition:
color 150ms ease,
background 150ms ease,
border-color 150ms ease;
}
.chat-tool-msg-summary svg,
.chat-tool-msg-summary__icon {
flex-shrink: 0;
}
.chat-tool-msg-summary span {
display: inline-flex;
align-items: center;
line-height: var(--control-ui-text-sm);
}
.chat-tool-msg-summary[type="button"] {
background:
linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 34%),
@@ -705,8 +724,13 @@
.chat-tool-msg-summary::before {
content: "▸";
display: inline-flex;
align-items: center;
justify-content: center;
width: 8px;
height: 20px;
font-size: 10px;
margin-top: 3px;
line-height: 1;
flex-shrink: 0;
transition: transform 150ms ease;
}
@@ -757,17 +781,16 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-top: 2px;
align-self: center;
width: 18px;
height: 18px;
color: var(--accent);
opacity: 0.75;
flex-shrink: 0;
}
.chat-tool-msg-summary__icon svg {
width: 14px;
height: 14px;
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 1.5px;
@@ -776,6 +799,8 @@
}
.chat-tool-msg-summary__label {
align-self: center;
min-height: 20px;
font-weight: 600;
color: var(--text);
flex: 0 1 auto;
@@ -789,8 +814,11 @@
.chat-tool-msg-summary__names,
.chat-tool-msg-summary__preview {
align-self: center;
min-height: 20px;
font-family: var(--mono);
font-size: var(--control-ui-text-xs);
font-size: var(--control-ui-text-sm);
transform: translateY(0.8px);
color: color-mix(in srgb, var(--text) 76%, var(--muted) 24%);
flex: 1 1 18rem;
max-width: 100%;
ui/src/styles/chat/tool-cards.test.ts
+18
View File
@@ -8,13 +8,31 @@ function readToolCardsCss(): string {
describe("chat tool card styles", () => {
it("keeps collapsed tool summaries readable without premature ellipsis", () => {
const css = readToolCardsCss();
const summaryRule = css.match(/\.chat-tool-msg-summary\s*\{[^}]*\}/)?.[0] ?? "";
expect(css).toContain(".chat-tool-msg-summary {");
expect(css).toContain("align-items: center;");
expect(css).toContain("align-content: center;");
expect(css).toContain(".chat-bubble--tool-shell > .chat-tool-msg-collapse {\n margin-top: 0;");
expect(css).toContain("flex-wrap: wrap;");
expect(css).toContain("gap: 12px;");
expect(css).toContain("font-size: var(--control-ui-text-sm);");
expect(css).toContain(
".chat-tool-msg-summary svg,\n.chat-tool-msg-summary__icon {\n flex-shrink: 0;",
);
expect(css).toContain(
".chat-tool-msg-summary span {\n display: inline-flex;\n align-items: center;\n line-height: var(--control-ui-text-sm);",
);
expect(summaryRule).toContain("font-family: inherit;");
expect(summaryRule).not.toContain("font: inherit;");
expect(css).toContain("color: var(--text);");
expect(css).toMatch(/\.chat-tool-msg-summary__names\s*,/);
expect(css).toContain(".chat-tool-msg-summary__preview");
expect(css).toContain("font-size: var(--control-ui-text-sm);");
expect(css).toContain("transform: translateY(0.8px);");
expect(css).toContain("height: 20px;");
expect(css).toContain("min-height: 20px;");
expect(css).not.toContain(".chat-tool-msg-summary__names {\n text-align: center;");
expect(css).toContain("overflow-wrap: anywhere;");
expect(css).toContain("text-overflow: clip;");
expect(css).toContain("white-space: normal;");