From 469c1936b493d09a70e6866d29213dfa232d8535 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 26 Jun 2024 20:38:12 +0200
Subject: [PATCH] Bugfix/fix horizontal overflow in historical market data
 table of admin control panel (#3515)

* Fix horizontal overflow

* Update changelog
---
 CHANGELOG.md                                  |   1 +
 .../admin-market-data/admin-market-data.html  | 374 +++++++++---------
 2 files changed, 189 insertions(+), 186 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 106773ae1..c3d3560e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed the dialog position (center) on mobile
+- Fixed the horizontal overflow in the historical market data table of the admin control panel
 - Changed the mechanism of the `INTRADAY` data gathering to persist data only if the market state is `OPEN`
 - Fixed the creation of activities with `MANUAL` data source (with no historical market data)
 
diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index e3a16dd62..0606b136a 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -11,208 +11,210 @@
   </div>
   <div class="row">
     <div class="col">
-      <table
-        class="gf-table w-100"
-        mat-table
-        matSort
-        matSortActive="symbol"
-        matSortDirection="asc"
-        [dataSource]="dataSource"
-      >
-        <ng-container matColumnDef="symbol">
-          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-            <ng-container i18n>Symbol</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.symbol }}
-          </td>
-        </ng-container>
+      <div class="overflow-x-auto">
+        <table
+          class="gf-table w-100"
+          mat-table
+          matSort
+          matSortActive="symbol"
+          matSortDirection="asc"
+          [dataSource]="dataSource"
+        >
+          <ng-container matColumnDef="symbol">
+            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+              <ng-container i18n>Symbol</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1" mat-cell>
+              {{ element.symbol }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="nameWithSymbol">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="symbol"
-          >
-            <ng-container i18n>Name</ng-container>
-          </th>
-          <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
-            <div class="text-truncate">{{ element.name }}</div>
-            @if (!isUUID(element.symbol)) {
-              <div>
-                <small class="text-muted">{{
-                  element.symbol | gfSymbol
-                }}</small>
-              </div>
-            }
-          </td>
-          <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-        </ng-container>
+          <ng-container matColumnDef="nameWithSymbol">
+            <th
+              *matHeaderCellDef
+              class="px-1"
+              mat-header-cell
+              mat-sort-header="symbol"
+            >
+              <ng-container i18n>Name</ng-container>
+            </th>
+            <td *matCellDef="let element" class="line-height-1 px-1" mat-cell>
+              <div class="text-truncate">{{ element.name }}</div>
+              @if (!isUUID(element.symbol)) {
+                <div>
+                  <small class="text-muted">{{
+                    element.symbol | gfSymbol
+                  }}</small>
+                </div>
+              }
+            </td>
+            <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+          </ng-container>
 
-        <ng-container matColumnDef="dataSource">
-          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-            <ng-container i18n>Data Source</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.dataSource }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="dataSource">
+            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+              <ng-container i18n>Data Source</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1" mat-cell>
+              {{ element.dataSource }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="assetClass">
-          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-            <ng-container i18n>Asset Class</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.assetClass }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="assetClass">
+            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+              <ng-container i18n>Asset Class</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1" mat-cell>
+              {{ element.assetClass }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="assetSubClass">
-          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-            <ng-container i18n>Asset Sub Class</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.assetSubClass }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="assetSubClass">
+            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+              <ng-container i18n>Asset Sub Class</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1" mat-cell>
+              {{ element.assetSubClass }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="date">
-          <th *matHeaderCellDef class="px-1" mat-header-cell>
-            <ng-container i18n>First Activity</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ (element.date | date: defaultDateFormat) ?? '' }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="date">
+            <th *matHeaderCellDef class="px-1" mat-header-cell>
+              <ng-container i18n>First Activity</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1" mat-cell>
+              {{ (element.date | date: defaultDateFormat) ?? '' }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="activitiesCount">
-          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
-            <ng-container i18n>Activities Count</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-            {{ element.activitiesCount }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="activitiesCount">
+            <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+              <ng-container i18n>Activities Count</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+              {{ element.activitiesCount }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="marketDataItemCount">
-          <th *matHeaderCellDef class="px-1" mat-header-cell>
-            <ng-container i18n>Historical Data</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-            {{ element.marketDataItemCount }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="marketDataItemCount">
+            <th *matHeaderCellDef class="px-1" mat-header-cell>
+              <ng-container i18n>Historical Data</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+              {{ element.marketDataItemCount }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="sectorsCount">
-          <th *matHeaderCellDef class="px-1" mat-header-cell>
-            <ng-container i18n>Sectors Count</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-            {{ element.sectorsCount }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="sectorsCount">
+            <th *matHeaderCellDef class="px-1" mat-header-cell>
+              <ng-container i18n>Sectors Count</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+              {{ element.sectorsCount }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="countriesCount">
-          <th *matHeaderCellDef class="px-1" mat-header-cell>
-            <ng-container i18n>Countries Count</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-            {{ element.countriesCount }}
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="countriesCount">
+            <th *matHeaderCellDef class="px-1" mat-header-cell>
+              <ng-container i18n>Countries Count</ng-container>
+            </th>
+            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+              {{ element.countriesCount }}
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="comment">
-          <th *matHeaderCellDef class="px-1" mat-header-cell></th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            @if (element.comment) {
-              <ion-icon class="d-block" name="document-text-outline" />
-            }
-          </td>
-        </ng-container>
+          <ng-container matColumnDef="comment">
+            <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+            <td *matCellDef="let element" class="px-1" mat-cell>
+              @if (element.comment) {
+                <ion-icon class="d-block" name="document-text-outline" />
+              }
+            </td>
+          </ng-container>
 
-        <ng-container matColumnDef="actions" stickyEnd>
-          <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
-            <button
-              class="mx-1 no-min-width px-2"
-              mat-button
-              [matMenuTriggerFor]="assetProfilesActionsMenu"
-              (click)="$event.stopPropagation()"
-            >
-              <ion-icon name="ellipsis-vertical" />
-            </button>
-            <mat-menu #assetProfilesActionsMenu="matMenu" xPosition="before">
-              <button mat-menu-item (click)="onGather7Days()">
-                <ng-container i18n>Gather Recent Data</ng-container>
-              </button>
-              <button mat-menu-item (click)="onGatherMax()">
-                <ng-container i18n>Gather All Data</ng-container>
-              </button>
-              <button mat-menu-item (click)="onGatherProfileData()">
-                <ng-container i18n>Gather Profile Data</ng-container>
-              </button>
-            </mat-menu>
-          </th>
-          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-            <button
-              class="mx-1 no-min-width px-2"
-              mat-button
-              [matMenuTriggerFor]="assetProfileActionsMenu"
-              (click)="$event.stopPropagation()"
-            >
-              <ion-icon name="ellipsis-horizontal" />
-            </button>
-            <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
-              <a
-                mat-menu-item
-                [queryParams]="{
-                  assetProfileDialog: true,
-                  dataSource: element.dataSource,
-                  symbol: element.symbol
-                }"
-                [routerLink]="[]"
+          <ng-container matColumnDef="actions" stickyEnd>
+            <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
+              <button
+                class="mx-1 no-min-width px-2"
+                mat-button
+                [matMenuTriggerFor]="assetProfilesActionsMenu"
+                (click)="$event.stopPropagation()"
               >
-                <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="create-outline" />
-                  <span i18n>Edit</span>
-                </span>
-              </a>
+                <ion-icon name="ellipsis-vertical" />
+              </button>
+              <mat-menu #assetProfilesActionsMenu="matMenu" xPosition="before">
+                <button mat-menu-item (click)="onGather7Days()">
+                  <ng-container i18n>Gather Recent Data</ng-container>
+                </button>
+                <button mat-menu-item (click)="onGatherMax()">
+                  <ng-container i18n>Gather All Data</ng-container>
+                </button>
+                <button mat-menu-item (click)="onGatherProfileData()">
+                  <ng-container i18n>Gather Profile Data</ng-container>
+                </button>
+              </mat-menu>
+            </th>
+            <td *matCellDef="let element" class="px-1 text-center" mat-cell>
               <button
-                mat-menu-item
-                [disabled]="
-                  element.activitiesCount !== 0 ||
-                  element.isBenchmark ||
-                  element.symbol.startsWith(ghostfolioScraperApiSymbolPrefix)
-                "
-                (click)="
-                  onDeleteProfileData({
-                    dataSource: element.dataSource,
-                    symbol: element.symbol
-                  })
-                "
+                class="mx-1 no-min-width px-2"
+                mat-button
+                [matMenuTriggerFor]="assetProfileActionsMenu"
+                (click)="$event.stopPropagation()"
               >
-                <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="trash-outline" />
-                  <span i18n>Delete</span>
-                </span>
+                <ion-icon name="ellipsis-horizontal" />
               </button>
-            </mat-menu>
-          </td>
-        </ng-container>
+              <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
+                <a
+                  mat-menu-item
+                  [queryParams]="{
+                    assetProfileDialog: true,
+                    dataSource: element.dataSource,
+                    symbol: element.symbol
+                  }"
+                  [routerLink]="[]"
+                >
+                  <span class="align-items-center d-flex">
+                    <ion-icon class="mr-2" name="create-outline" />
+                    <span i18n>Edit</span>
+                  </span>
+                </a>
+                <button
+                  mat-menu-item
+                  [disabled]="
+                    element.activitiesCount !== 0 ||
+                    element.isBenchmark ||
+                    element.symbol.startsWith(ghostfolioScraperApiSymbolPrefix)
+                  "
+                  (click)="
+                    onDeleteProfileData({
+                      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)="
-            onOpenAssetProfileDialog({
-              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)="
+              onOpenAssetProfileDialog({
+                dataSource: row.dataSource,
+                symbol: row.symbol
+              })
+            "
+          ></tr>
+        </table>
+      </div>
 
       <mat-paginator
         [length]="totalItems"