fix(ui): refine tool error card styling

altaywtf · altaywtf · commit 8839bbff0164 · 2026-05-26T23:19:02.000+03:00
diff --git a/ui/src/styles/chat/tool-cards.css b/ui/src/styles/chat/tool-cards.css
@@ -19,7 +19,7 @@
 
 .chat-tool-card--expanded {
   max-height: none;
-  overflow: visible;
+  overflow: hidden;
 }
 
 .chat-tool-card:hover {
@@ -63,10 +63,13 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  flex: 1 1 auto;
   font-weight: 600;
   font-size: var(--control-ui-text-md);
   line-height: 1.2;
   min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .chat-tool-card__icon {
@@ -95,7 +98,9 @@
   align-items: center;
   justify-content: center;
   gap: 4px;
+  flex-shrink: 0;
   font-size: 11px;
+  white-space: nowrap;
   color: var(--muted);
   opacity: 1;
   transition:
@@ -196,6 +201,34 @@
 
 .chat-tool-card--error {
   border-color: color-mix(in srgb, var(--destructive, var(--danger, #c0392b)) 35%, var(--border));
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--destructive, var(--danger, #c0392b)) 8%, transparent),
+      transparent 36%
+    ),
+    color-mix(in srgb, var(--card) 86%, var(--secondary) 14%);
+}
+
+.chat-tool-card--error:hover {
+  border-color: color-mix(
+    in srgb,
+    var(--destructive, var(--danger, #c0392b)) 44%,
+    var(--border-strong)
+  );
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--destructive, var(--danger, #c0392b)) 11%, transparent),
+      transparent 38%
+    ),
+    color-mix(in srgb, var(--card) 78%, var(--bg-hover) 22%);
+}
+
+.chat-tool-card--error .chat-tool-card__icon,
+.chat-tool-msg-summary.chat-tool-msg-summary--error .chat-tool-msg-summary__icon {
+  color: var(--destructive, var(--danger, #c0392b));
+  opacity: 0.9;
 }
 
 .chat-tool-msg-summary__error-badge {
@@ -429,6 +462,12 @@
   max-height: min(520px, 60vh);
 }
 
+.chat-tool-card__block-content code {
+  white-space: inherit;
+  overflow-wrap: anywhere;
+  word-break: inherit;
+}
+
 .chat-tool-card__inline {
   margin-top: 10px;
   white-space: pre-wrap;
@@ -651,6 +690,13 @@
 
 .chat-tool-msg-summary.chat-tool-msg-summary--error {
   border-color: color-mix(in srgb, var(--destructive, var(--danger, #c0392b)) 30%, var(--border));
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--destructive, var(--danger, #c0392b)) 11%, transparent),
+      transparent 36%
+    ),
+    color-mix(in srgb, var(--card) 86%, var(--secondary) 14%);
 }
 
 .chat-tool-msg-summary::-webkit-details-marker {
@@ -686,6 +732,21 @@
   border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
 }
 
+.chat-tool-msg-summary.chat-tool-msg-summary--error:hover {
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--destructive, var(--danger, #c0392b)) 14%, transparent),
+      transparent 38%
+    ),
+    color-mix(in srgb, var(--card) 78%, var(--bg-hover) 22%);
+  border-color: color-mix(
+    in srgb,
+    var(--destructive, var(--danger, #c0392b)) 38%,
+    var(--border-strong)
+  );
+}
+
 .chat-tool-msg-collapse--manual.is-open > .chat-tool-msg-summary,
 .chat-tool-msg-collapse[open] > .chat-tool-msg-summary {
   border-bottom-right-radius: 0;
@@ -858,6 +919,10 @@
     max-height: 100px;
   }
 
+  .chat-tool-card--expanded {
+    max-height: none;
+  }
+
   .chat-tool-card__title {
     font-size: 12px;
   }
@@ -894,6 +959,10 @@
     max-height: 80px;
   }
 
+  .chat-tool-card--expanded {
+    max-height: none;
+  }
+
   .chat-tool-card__preview {
     padding: 4px 6px;
     max-height: 28px;
diff --git a/ui/src/styles/chat/tool-cards.test.ts b/ui/src/styles/chat/tool-cards.test.ts
@@ -20,4 +20,14 @@ describe("chat tool card styles", () => {
     expect(css).toContain("white-space: normal;");
     expect(css).not.toContain("max-width: 42%;");
   });
+
+  it("keeps expanded tool cards and actions usable on narrow screens", () => {
+    const css = readToolCardsCss();
+
+    expect(css).toContain(".chat-tool-card--expanded {");
+    expect(css).toContain("max-height: none;");
+    expect(css).toContain("overflow: hidden;");
+    expect(css).toContain("white-space: nowrap;");
+    expect(css).toContain(".chat-tool-card__block-content code");
+  });
 });
