Show a list's full name on hover, and make its count easy to read

A list name too long for the node was cut with an ellipsis and nowhere
readable in full. It now shows whole in a tooltip when it is cut, the
way sidebar titles do. The count is white on a solid badge, and quiet
when the list is empty.

The name tooltip also takes the app's font: it asked for Roboto, which
the app does not load, and fell back to a serif - in the flow list too.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/app/shared/nodes/node-list-field/node-list-field.css

@@ -85,18 +85,22 @@
 
 .llm-array-count {
   flex: 0 0 auto;
-  min-width: 18px;
-  padding: 1px 6px;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
   border-radius: 999px;
-  background: #e0e7ff;
-  color: #3730a3;
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1.4;
+  background: #4f46e5;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
   text-align: center;
+  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3);
 }
 
-.llm-array-toggle:disabled .llm-array-count {
-  background: #f1f5f9;
+/* Empty: still there to say "none", but quiet - nothing to open. */
+.llm-array-count.llm-array-count-empty {
+  background: transparent;
   color: #94a3b8;
+  box-shadow: inset 0 0 0 1px #cbd5e1;
 }

src/app/shared/nodes/node-list-field/node-list-field.html

@@ -10,12 +10,12 @@
     class="llm-array-toggle"
     [disabled]="!items.length"
     [attr.aria-expanded]="expanded()"
-    [attr.title]="items.length ? (expanded() ? 'Hide ' : 'Show ') + label.toLowerCase() : null"
+    [attr.aria-label]="label + ', ' + items.length + (items.length === 1 ? ' item' : ' items')"
     (pointerdown)="$event.stopPropagation()"
     (click)="toggle($event)">
     <i class="bi llm-array-chevron" [class.bi-chevron-down]="expanded()" [class.bi-chevron-right]="!expanded()"></i>
-    <span class="llm-param-key">{{ label }}</span>
-    <span class="llm-array-count">{{ items.length }}</span>
+    <span class="llm-param-key" [appTruncatedTooltip]="label">{{ label }}</span>
+    <span class="llm-array-count" [class.llm-array-count-empty]="!items.length">{{ items.length }}</span>
   </button>
   @if (!readonly) {
   <button

src/app/shared/nodes/node-list-field/node-list-field.ts

@@ -4,6 +4,8 @@
 
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, signal } from '@angular/core';
 
+import { TruncatedTooltipDirective } from '@shared/truncated-tooltip/truncated-tooltip';
+
 export type NodeListFieldItem = {
   index: number;
   summary: string;
@@ -22,6 +24,7 @@ export type NodeListFieldItem = {
 @Component({
   selector: 'app-node-list-field',
   standalone: true,
+  imports: [TruncatedTooltipDirective],
   templateUrl: './node-list-field.html',
   styleUrl: './node-list-field.css',
   changeDetection: ChangeDetectionStrategy.OnPush

src/styles.css

@@ -436,6 +436,9 @@ body.node-focus-modal-open {
   background: #ffffff;
   color: #1e293b;
   box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
+  /* Material asks for Roboto, which the app does not load, and the preview fell back to a serif. */
+  font-family: var(--font-body);
+  font-size: 12px;
 }
 
 .llm-error-title,