From 54d42c7c9a32918f5ac635082c05cf680ea4d1ca Mon Sep 17 00:00:00 2001
From: Shakker <shakkerdroid@gmail.com>
Date: Sat, 30 May 2026 19:13:57 +0100
Subject: [PATCH] fix: vertically center tool summary labels

---
 ui/src/styles/chat/tool-cards.css     | 54 ++++++++++++++++++++-------
 ui/src/styles/chat/tool-cards.test.ts | 18 +++++++++
 2 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css
index 83cb6e2c7cab..1c44620ab6ad 100644
--- a/ui/src/styles/chat/tool-cards.css
+++ b/ui/src/styles/chat/tool-cards.css
@@ -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%;
diff --git a/ui/src/styles/chat/tool-cards.test.ts b/ui/src/styles/chat/tool-cards.test.ts
index bfe9dccc5e74..f250c46c1f5b 100644
--- a/ui/src/styles/chat/tool-cards.test.ts
+++ b/ui/src/styles/chat/tool-cards.test.ts
@@ -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;");