wip: desktop work

2 files changed, 17 insertions, 10 deletions

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index fa251a2b3..dcfadeff6 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -29,20 +29,21 @@
 
 [data-component="tool-error"] {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: 8px;
 
-  [data-slot="icon"] {
+  [data-slot="tool-error-icon"] {
     color: var(--icon-critical-active);
+    margin-top: 4px;
   }
 
-  [data-slot="content"] {
+  [data-slot="tool-error-content"] {
     display: flex;
-    align-items: center;
+    align-items: start;
     gap: 8px;
   }
 
-  [data-slot="title"] {
+  [data-slot="tool-error-title"] {
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
@@ -51,7 +52,11 @@
     letter-spacing: var(--letter-spacing-normal);
     color: var(--ember-light-11);
     text-transform: capitalize;
+    white-space: nowrap;
   }
+
+  /* [data-slot="tool-error-message"] { */
+  /* } */
 }
 
 [data-component="tool-output"] {
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 1aaab751a..272a716a4 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -151,15 +151,17 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
             return (
               <Card variant="error">
                 <div data-component="tool-error">
-                  <Icon name="circle-ban-sign" size="small" data-slot="icon" />
+                  <Icon name="circle-ban-sign" size="small" data-slot="tool-error-icon" />
                   <Switch>
                     <Match when={title}>
-                      <div data-slot="content">
-                        <div data-slot="title">{title}</div>
-                        <span>{rest.join(": ")}</span>
+                      <div data-slot="tool-error-content">
+                        <div data-slot="tool-error-title">{title}</div>
+                        <span data-slot="tool-error-message">{rest.join(": ")}</span>
                       </div>
                     </Match>
-                    <Match when={true}>{cleaned}</Match>
+                    <Match when={true}>
+                      <span data-slot="tool-error-message">{cleaned}</span>
+                    </Match>
                   </Switch>
                 </div>
               </Card>