tui: keep patch tool counts visible with long filenames (#18678)

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

@@ -8,7 +8,10 @@
   justify-content: flex-start;
 
   [data-slot="basic-tool-tool-trigger-content"] {
+    flex: 0 1 auto;
     width: auto;
+    max-width: calc(100% - 24px);
+    min-width: 0;
     display: flex;
     align-items: center;
     align-self: stretch;
@@ -51,12 +54,16 @@
   [data-slot="basic-tool-tool-info"] {
     flex: 0 1 auto;
     min-width: 0;
+    max-width: 100%;
     font-size: 14px;
   }
 
   [data-slot="basic-tool-tool-info-structured"] {
+    flex: 0 1 auto;
     width: auto;
-    display: flex;
+    max-width: 100%;
+    min-width: 0;
+    display: inline-flex;
     align-items: center;
     gap: 8px;
     justify-content: flex-start;
@@ -151,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"] {
@@ -436,10 +436,11 @@
   }
 
   [data-slot="message-part-title"] {
-    flex-shrink: 0;
+    flex: 1 1 auto;
     display: flex;
     align-items: center;
     gap: 8px;
+    min-width: 0;
     font-family: var(--font-family-sans);
     font-size: 14px;
     font-style: normal;
@@ -466,12 +467,17 @@
   }
 
   [data-slot="message-part-title-text"] {
+    flex-shrink: 0;
     text-transform: capitalize;
     color: var(--text-strong);
   }
 
   [data-slot="message-part-title-filename"] {
     /* No text-transform - preserve original filename casing */
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-weight: var(--font-weight-regular);
   }
 
@@ -501,6 +507,7 @@
     gap: 16px;
     align-items: center;
     justify-content: flex-end;
+    flex-shrink: 0;
   }
 }
 
@@ -1183,6 +1190,7 @@
     display: flex;
     flex-grow: 1;
     min-width: 0;
+    overflow: hidden;
   }
 
   [data-slot="apply-patch-directory"] {
@@ -1196,7 +1204,11 @@
 
   [data-slot="apply-patch-filename"] {
     color: var(--text-strong);
-    flex-shrink: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   [data-slot="apply-patch-trigger-actions"] {