fix(devtools): minor UI/UX improvements of the Injector Providers panel (#59531)

- The token rendered in the first col of the table is now being truncated in favor of the horizontal scroll of the panel which should make the log button accessible/visible all the time
- Introduced a "No such providers" label when a filter is applied
- The icon of the logProvider button has been substituted with `code` (as per the doc)
- The font size and width of the provider type filter have been slightly improved

PR Close #59531

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html

@@ -2,7 +2,7 @@
 @if (injector()) {
   <div class="injector-providers">
     <div class="filter">
-      <mat-form-field appearance="outline">
+      <mat-form-field class="token-search" appearance="outline">
         <mat-label>Search by token</mat-label>
         <input
           type="text"
@@ -13,7 +13,7 @@
         />
         <mat-icon matSuffix (click)="searchToken.set('')">close</mat-icon>
       </mat-form-field>
-      <mat-form-field appearance="outline">
+      <mat-form-field class="type-filter" appearance="outline">
         <mat-label>Search by type</mat-label>
         <mat-select [value]="searchType()" (selectionChange)="searchType.set($event.value)">
           <mat-option>None</mat-option>
@@ -27,7 +27,9 @@
       <table mat-table [dataSource]="visibleProviders()" class="mat-elevation-z4">
         <ng-container matColumnDef="token">
           <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Token</h3></th>
-          <td mat-cell *matCellDef="let provider">{{ provider.token }}</td>
+          <td mat-cell *matCellDef="let provider" class="token-cell" [attr.title]="provider.token">
+            {{ provider.token }}
+          </td>
         </ng-container>
         <ng-container matColumnDef="type">
           <th mat-header-cell *matHeaderCellDef><h3 class="column-title">Type</h3></th>
@@ -53,13 +55,15 @@
               matTooltip="Log provider in console"
               class="select"
               (click)="select(provider)"
-              >send</mat-icon
+              >code</mat-icon
             >
           </td>
         </ng-container>
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
+    } @else {
+      <p class="no-providers-label">No such providers</p>
     }
   </div>
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss

@@ -27,9 +27,21 @@ h2 {
       )
     );
 
-    &:first-child {
+    &.token-search {
       flex: 1;
     }
+
+    &.type-filter {
+      width: 10rem;
+    }
+
+    mat-select {
+      @include mat.select-overrides(
+        (
+          trigger-text-size: 0.8rem,
+        )
+      );
+    }
   }
 }
 
@@ -46,6 +58,14 @@ table {
   font-weight: bold;
 }
 
+.token-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  max-width: 0;
+}
+
 tr.example-detail-row {
   height: 0;
 }
@@ -83,8 +103,18 @@ tr.example-detail-row {
   opacity: 0.5;
 }
 
+.no-providers-label {
+  font-size: 0.8rem;
+  padding: 0.5rem 0;
+  text-align: center;
+}
+
 @include theme.dark-theme {
   .providers-title {
     color: #ffffff;
   }
+
+  .no-providers-label {
+    color: #bcc5ce;
+  }
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss

@@ -22,7 +22,7 @@
 }
 
 as-split-area {
-  overflow: auto !important;
+  overflow-y: auto !important;
 }
 
 :host {