Fix horizontal overflow

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -1,7 +1,8 @@
+<div class="overflow-x-auto">
   <table class="gf-table w-100" mat-table [dataSource]="benchmarks">
     <ng-container matColumnDef="name">
       <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Name</th>
-    <td *matCellDef="let element" class="px-2" mat-cell>
+      <td *matCellDef="let element" class="px-2 text-nowrap" mat-cell>
         {{ element?.name }}
       </td>
     </ng-container>
@@ -14,7 +15,11 @@
       >
         <ng-container i18n>50-Day Trend</ng-container>
       </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-2"
+        mat-cell
+      >
         <div class="d-flex justify-content-end">
           @if (element?.trend50d !== 'UNKNOWN') {
             <gf-trend-indicator
@@ -39,7 +44,11 @@
       >
         <ng-container i18n>200-Day Trend</ng-container>
       </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-2"
+        mat-cell
+      >
         <div class="d-flex justify-content-end">
           @if (element?.trend200d !== 'UNKNOWN') {
             <gf-trend-indicator
@@ -64,7 +73,11 @@
       >
         <ng-container i18n>Last All Time High</ng-container>
       </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-2"
+        mat-cell
+      >
         <div class="d-flex justify-content-end">
           @if (element?.performances?.allTimeHigh?.date) {
             <gf-value
@@ -159,6 +172,7 @@
       "
     ></tr>
   </table>
+</div>
 
 @if (isLoading) {
   <ngx-skeleton-loader