Bugfix/fix horizontal overflow in table of benchmark component (#4668)

* Fix horizontal overflow

* Update changelog

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed an issue in the performance calculation on the date of an activity when the unit price differs from the market price
+- Fixed the horizontal overflow in the table of the benchmark component
 
 ## 2.160.0 - 2025-05-04
 

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

@@ -1,7 +1,8 @@
-<table class="gf-table w-100" mat-table [dataSource]="benchmarks">
+<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
@@ -158,7 +171,8 @@
         })
       "
     ></tr>
-</table>
+  </table>
+</div>
 
 @if (isLoading) {
   <ngx-skeleton-loader