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,164 +1,178 @@
-<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>
-      {{ element?.name }}
-    </td>
-  </ng-container>
+<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 text-nowrap" mat-cell>
+        {{ element?.name }}
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="trend50d">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-2 text-right"
-      mat-header-cell
-    >
-      <ng-container i18n>50-Day Trend</ng-container>
-    </th>
-    <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
-            [value]="
-              element?.trend50d === 'UP'
-                ? 0.001
-                : element?.trend50d === 'DOWN'
-                  ? -0.001
-                  : 0
-            "
-          />
-        }
-      </div>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="trend50d">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-2 text-right"
+        mat-header-cell
+      >
+        <ng-container i18n>50-Day Trend</ng-container>
+      </th>
+      <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
+              [value]="
+                element?.trend50d === 'UP'
+                  ? 0.001
+                  : element?.trend50d === 'DOWN'
+                    ? -0.001
+                    : 0
+              "
+            />
+          }
+        </div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="trend200d">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-2 text-right"
-      mat-header-cell
-    >
-      <ng-container i18n>200-Day Trend</ng-container>
-    </th>
-    <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
-            [value]="
-              element?.trend200d === 'UP'
-                ? 0.001
-                : element?.trend200d === 'DOWN'
-                  ? -0.001
-                  : 0
-            "
-          />
-        }
-      </div>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="trend200d">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-2 text-right"
+        mat-header-cell
+      >
+        <ng-container i18n>200-Day Trend</ng-container>
+      </th>
+      <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
+              [value]="
+                element?.trend200d === 'UP'
+                  ? 0.001
+                  : element?.trend200d === 'DOWN'
+                    ? -0.001
+                    : 0
+              "
+            />
+          }
+        </div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="date">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-2 text-right"
-      mat-header-cell
-    >
-      <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>
-      <div class="d-flex justify-content-end">
-        @if (element?.performances?.allTimeHigh?.date) {
+    <ng-container matColumnDef="date">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-2 text-right"
+        mat-header-cell
+      >
+        <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
+      >
+        <div class="d-flex justify-content-end">
+          @if (element?.performances?.allTimeHigh?.date) {
+            <gf-value
+              [isDate]="true"
+              [locale]="locale"
+              [value]="element?.performances?.allTimeHigh?.date"
+            />
+          }
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="change">
+      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+        <span class="d-none d-sm-block text-nowrap" i18n
+          >Change from All Time High</span
+        >
+        <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
+      </th>
+      <td *matCellDef="let element" class="px-2 text-right" mat-cell>
+        @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
           <gf-value
-            [isDate]="true"
+            class="d-inline-block justify-content-end"
+            [isPercent]="true"
             [locale]="locale"
-            [value]="element?.performances?.allTimeHigh?.date"
+            [ngClass]="{
+              'text-danger':
+                element?.performances?.allTimeHigh?.performancePercent < 0,
+              'text-success':
+                element?.performances?.allTimeHigh?.performancePercent === 0
+            }"
+            [value]="element?.performances?.allTimeHigh?.performancePercent"
           />
         }
-      </div>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="change">
-    <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
-      <span class="d-none d-sm-block text-nowrap" i18n
-        >Change from All Time High</span
-      >
-      <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
-    </th>
-    <td *matCellDef="let element" class="px-2 text-right" mat-cell>
-      @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
-        <gf-value
-          class="d-inline-block justify-content-end"
-          [isPercent]="true"
-          [locale]="locale"
-          [ngClass]="{
-            'text-danger':
-              element?.performances?.allTimeHigh?.performancePercent < 0,
-            'text-success':
-              element?.performances?.allTimeHigh?.performancePercent === 0
-          }"
-          [value]="element?.performances?.allTimeHigh?.performancePercent"
-        />
-      }
-    </td>
-  </ng-container>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="marketCondition">
-    <th *matHeaderCellDef mat-header-cell></th>
-    <td *matCellDef="let element" class="px-0" mat-cell>
-      @if (element?.marketCondition) {
-        <div class="text-center" [title]="translate(element.marketCondition)">
-          {{ resolveMarketCondition(element.marketCondition).emoji }}
-        </div>
-      }
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="marketCondition">
+      <th *matHeaderCellDef mat-header-cell></th>
+      <td *matCellDef="let element" class="px-0" mat-cell>
+        @if (element?.marketCondition) {
+          <div class="text-center" [title]="translate(element.marketCondition)">
+            {{ resolveMarketCondition(element.marketCondition).emoji }}
+          </div>
+        }
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="actions" stickyEnd>
-    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
-    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-      @if (hasPermissionToDeleteItem) {
-        <button
-          class="mx-1 no-min-width px-2"
-          mat-button
-          [matMenuTriggerFor]="benchmarkMenu"
-          (click)="$event.stopPropagation()"
-        >
-          <ion-icon name="ellipsis-horizontal" />
-        </button>
-      }
-      <mat-menu #benchmarkMenu="matMenu" xPosition="before">
-        <button
-          mat-menu-item
-          [disabled]="!hasPermissionToDeleteItem"
-          (click)="
-            onDeleteItem({
-              dataSource: element.dataSource,
-              symbol: element.symbol
-            })
-          "
-        >
-          <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="trash-outline" />
-            <span i18n>Delete</span>
-          </span>
-        </button>
-      </mat-menu>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="actions" stickyEnd>
+      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        @if (hasPermissionToDeleteItem) {
+          <button
+            class="mx-1 no-min-width px-2"
+            mat-button
+            [matMenuTriggerFor]="benchmarkMenu"
+            (click)="$event.stopPropagation()"
+          >
+            <ion-icon name="ellipsis-horizontal" />
+          </button>
+        }
+        <mat-menu #benchmarkMenu="matMenu" xPosition="before">
+          <button
+            mat-menu-item
+            [disabled]="!hasPermissionToDeleteItem"
+            (click)="
+              onDeleteItem({
+                dataSource: element.dataSource,
+                symbol: element.symbol
+              })
+            "
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="trash-outline" />
+              <span i18n>Delete</span>
+            </span>
+          </button>
+        </mat-menu>
+      </td>
+    </ng-container>
 
-  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr
-    *matRowDef="let row; columns: displayedColumns"
-    class="cursor-pointer"
-    mat-row
-    (click)="
-      onOpenBenchmarkDialog({
-        dataSource: row.dataSource,
-        symbol: row.symbol
-      })
-    "
-  ></tr>
-</table>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr
+      *matRowDef="let row; columns: displayedColumns"
+      class="cursor-pointer"
+      mat-row
+      (click)="
+        onOpenBenchmarkDialog({
+          dataSource: row.dataSource,
+          symbol: row.symbol
+        })
+      "
+    ></tr>
+  </table>
+</div>
 
 @if (isLoading) {
   <ngx-skeleton-loader