tui: improve tool display layout to prevent text overflow and add dedicated action wrapper

Author: iamdavidhill

packages/ui/src/components/basic-tool.css

@@ -8,8 +8,9 @@
   justify-content: flex-start;
 
   [data-slot="basic-tool-tool-trigger-content"] {
-    flex: 1 1 auto;
-    width: 100%;
+    flex: 0 1 auto;
+    width: auto;
+    max-width: calc(100% - 24px);
     min-width: 0;
     display: flex;
     align-items: center;
@@ -51,19 +52,21 @@
   }
 
   [data-slot="basic-tool-tool-info"] {
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     min-width: 0;
+    max-width: 100%;
     font-size: 14px;
   }
 
   [data-slot="basic-tool-tool-info-structured"] {
-    flex: 1 1 auto;
-    width: 100%;
+    flex: 0 1 auto;
+    width: auto;
+    max-width: 100%;
     min-width: 0;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 8px;
-    justify-content: space-between;
+    justify-content: flex-start;
   }
 
   [data-slot="basic-tool-tool-info-main"] {
@@ -155,4 +158,10 @@
     letter-spacing: var(--letter-spacing-normal);
     color: var(--text-base);
   }
+
+  [data-slot="basic-tool-tool-action"] {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
 }

packages/ui/src/components/basic-tool.tsx

@@ -174,7 +174,9 @@ export function BasicTool(props: BasicToolProps) {
                           </Show>
                         </Show>
                       </div>
-                      <Show when={!pending() && trigger().action}>{trigger().action}</Show>
+                      <Show when={!pending() && trigger().action}>
+                        <span data-slot="basic-tool-tool-action">{trigger().action}</span>
+                      </Show>
                     </div>
                   )}
                 </Match>

packages/ui/src/components/message-part.css

@@ -424,7 +424,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 12px;
   width: 100%;
 
   [data-slot="message-part-title-area"] {