fix: give more space for provider labels to fit on one line

Reduces the font size of the provider labels so they don't wrap to the next line as often.

Author: crisbeto

report-app/src/app/pages/report-list/report-list.html

@@ -67,14 +67,17 @@
               <div class="run-meta">
                 <provider-label
                   [id]="group.model"
-                  [label]="group.model"/>
+                  [label]="group.model"
+                  size="small"/>
                 <provider-label
                   [id]="group.framework.fullStackFramework.id"
-                  [label]="group.framework.fullStackFramework.displayName"/>
+                  [label]="group.framework.fullStackFramework.displayName"
+                  size="small"/>
                 @if (group.runner) {
                   <provider-label
                     [id]="group.runner.id"
-                    [label]="group.runner.displayName"/>
+                    [label]="group.runner.displayName"
+                    size="small"/>
                 }
               </div>
               <stacked-bar-chart

report-app/src/app/pages/report-viewer/report-viewer.html

@@ -343,7 +343,7 @@ <h5>
                     {{ result.score.totalPoints }} /
                     {{ result.score.maxOverallPoints }} points ({{
                       totalPercent
-                    }})
+                    }}%)
                   </span>
                 </div>
               </div>

report-app/src/app/shared/provider-label.ts

@@ -17,6 +17,11 @@ const exactMatches: Record<string, string> = {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
+      font-size: 1rem;
+    }
+
+    :host(.small) {
+      font-size: 0.75rem;
     }
 
     .logo {
@@ -39,11 +44,14 @@ const exactMatches: Record<string, string> = {
   `,
   host: {
     '[class]': 'id()',
+    '[class.small]': 'size() === "small"',
   },
 })
 export class ProviderLabel {
   readonly id = input<string>();
   readonly label = input.required<string>();
+  readonly size = input<'small' | 'medium'>('medium');
+
   protected logo = computed(() => {
     const id = this.id();