From 87501e094d865521212de54f6a3b38ed6ad5228f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 8 Jun 2024 17:20:38 +0200
Subject: [PATCH] Feature/improve allocations by ETF holding for mobile (#3469)

---
 .../access-table/access-table.component.html  | 123 ++--
 .../accounts-table.component.html             | 528 +++++++++---------
 .../components/admin-users/admin-users.html   |   2 +-
 .../components/admin-users/admin-users.scss   |  14 +-
 .../user-account-access.scss                  |   4 -
 .../src/app/pages/accounts/accounts-page.html |  36 +-
 .../src/app/pages/accounts/accounts-page.scss |   4 -
 apps/client/src/styles.scss                   |   4 +
 .../activities-table.component.html           |   2 +-
 .../activities-table.component.scss           |   4 -
 .../holdings-table.component.html             |   2 +-
 .../holdings-table.component.scss             |  14 +-
 .../top-holdings/top-holdings.component.html  | 118 ++--
 13 files changed, 431 insertions(+), 424 deletions(-)

diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index 8112ca4ad..a8386d5d2 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/apps/client/src/app/components/access-table/access-table.component.html
@@ -1,67 +1,72 @@
-<table class="gf-table w-100" mat-table [dataSource]="dataSource">
-  <ng-container matColumnDef="alias">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      {{ element.alias }}
-    </td>
-  </ng-container>
+<div class="overflow-x-auto">
+  <table class="gf-table w-100" mat-table [dataSource]="dataSource">
+    <ng-container matColumnDef="alias">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Alias</th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        {{ element.alias }}
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="grantee">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Grantee</th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      {{ element.grantee }}
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="grantee">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Grantee</th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        {{ element.grantee }}
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="type">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th>
-    <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
-      <div class="align-items-center d-flex">
-        @if (element.permissions.includes('READ')) {
-          <ion-icon class="mr-1" name="lock-open-outline" />
-          <ng-container i18n>View</ng-container>
-        } @else if (element.permissions.includes('READ_RESTRICTED')) {
-          <ion-icon class="mr-1" name="lock-closed-outline" />
-          <ng-container i18n>Restricted view</ng-container>
-        }
-      </div>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="type">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
+        <div class="align-items-center d-flex">
+          @if (element.permissions.includes('READ')) {
+            <ion-icon class="mr-1" name="lock-open-outline" />
+            <ng-container i18n>View</ng-container>
+          } @else if (element.permissions.includes('READ_RESTRICTED')) {
+            <ion-icon class="mr-1" name="lock-closed-outline" />
+            <ng-container i18n>Restricted view</ng-container>
+          }
+        </div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="details">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
-    <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
-      <div *ngIf="element.type === 'PUBLIC'" class="align-items-center d-flex">
-        <ion-icon class="mr-1" name="link-outline" />
-        <a
-          href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
-          target="_blank"
-          >{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
+    <ng-container matColumnDef="details">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Details</th>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
+        <div
+          *ngIf="element.type === 'PUBLIC'"
+          class="align-items-center d-flex"
         >
-      </div>
-    </td>
-  </ng-container>
+          <ion-icon class="mr-1" name="link-outline" />
+          <a
+            href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
+            target="_blank"
+            >{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
+          >
+        </div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="actions" stickyEnd>
-    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+    <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>
-      <button
-        class="mx-1 no-min-width px-2"
-        mat-button
-        [matMenuTriggerFor]="transactionMenu"
-        (click)="$event.stopPropagation()"
-      >
-        <ion-icon name="ellipsis-horizontal" />
-      </button>
-      <mat-menu #transactionMenu="matMenu" xPosition="before">
-        <button mat-menu-item (click)="onDeleteAccess(element.id)">
-          <ng-container i18n>Revoke</ng-container>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        <button
+          class="mx-1 no-min-width px-2"
+          mat-button
+          [matMenuTriggerFor]="transactionMenu"
+          (click)="$event.stopPropagation()"
+        >
+          <ion-icon name="ellipsis-horizontal" />
         </button>
-      </mat-menu>
-    </td>
-  </ng-container>
+        <mat-menu #transactionMenu="matMenu" xPosition="before">
+          <button mat-menu-item (click)="onDeleteAccess(element.id)">
+            <ng-container i18n>Revoke</ng-container>
+          </button>
+        </mat-menu>
+      </td>
+    </ng-container>
 
-  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  </table>
+</div>
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
index 241b5d90a..af3ba6787 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/apps/client/src/app/components/accounts-table/accounts-table.component.html
@@ -10,280 +10,298 @@
   </button>
 </div>
 
-<table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
-  <ng-container matColumnDef="status">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-header-cell
-    ></th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <div class="d-flex justify-content-center">
-        <ion-icon *ngIf="element.isExcluded" name="eye-off-outline" />
-      </div>
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-footer-cell
-    ></td>
-  </ng-container>
-
-  <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
-      <ng-container i18n>Name</ng-container>
-    </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      <gf-asset-profile-icon
-        *ngIf="element.Platform?.url"
-        class="d-inline d-sm-none mr-1"
-        [tooltip]="element.Platform?.name"
-        [url]="element.Platform?.url"
-      />
-      <span>{{ element.name }}</span>
-    </td>
-    <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
-  </ng-container>
-
-  <ng-container matColumnDef="currency">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-header-cell
-      mat-sort-header
-    >
-      <ng-container i18n>Currency</ng-container>
-    </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      {{ element.currency }}
-    </td>
-    <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
-      {{ baseCurrency }}
-    </td>
-  </ng-container>
+<div class="overflow-x-auto">
+  <table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
+    <ng-container matColumnDef="status">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-header-cell
+      ></th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <div class="d-flex justify-content-center">
+          <ion-icon *ngIf="element.isExcluded" name="eye-off-outline" />
+        </div>
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
 
-  <ng-container matColumnDef="platform">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-header-cell
-      mat-sort-header="Platform.name"
-    >
-      <ng-container i18n>Platform</ng-container>
-    </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <div class="d-flex">
+    <ng-container matColumnDef="account">
+      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
+        <ng-container i18n>Name</ng-container>
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
         <gf-asset-profile-icon
           *ngIf="element.Platform?.url"
-          class="mr-1"
+          class="d-inline d-sm-none mr-1"
           [tooltip]="element.Platform?.name"
           [url]="element.Platform?.url"
         />
-        <span>{{ element.Platform?.name }}</span>
-      </div>
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-footer-cell
-    ></td>
-  </ng-container>
+        <span>{{ element.name }}</span>
+      </td>
+      <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
+    </ng-container>
 
-  <ng-container matColumnDef="transactions">
-    <th
-      *matHeaderCellDef
-      class="justify-content-end px-1"
-      mat-header-cell
-      mat-sort-header="transactionCount"
-    >
-      <span class="d-block d-sm-none">#</span>
-      <span class="d-none d-sm-block" i18n>Activities</span>
-    </th>
-    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-      {{ element.transactionCount }}
-    </td>
-    <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
-      {{ transactionCount }}
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="currency">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Currency</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        {{ element.currency }}
+      </td>
+      <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
+        {{ baseCurrency }}
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="balance">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end px-1"
-      mat-header-cell
-      mat-sort-header
-    >
-      <ng-container i18n>Cash Balance</ng-container>
-    </th>
-    <td
-      *matCellDef="let element"
-      class="d-none d-lg-table-cell px-1 text-right"
-      mat-cell
-    >
-      <gf-value
-        class="d-inline-block justify-content-end"
-        [isCurrency]="true"
-        [locale]="locale"
-        [value]="element.balance"
-      />
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
-      mat-footer-cell
-    >
-      <gf-value
-        class="d-inline-block justify-content-end"
-        [isCurrency]="true"
-        [locale]="locale"
-        [value]="totalBalanceInBaseCurrency"
-      />
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="platform">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-header-cell
+        mat-sort-header="Platform.name"
+      >
+        <ng-container i18n>Platform</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <div class="d-flex">
+          <gf-asset-profile-icon
+            *ngIf="element.Platform?.url"
+            class="mr-1"
+            [tooltip]="element.Platform?.name"
+            [url]="element.Platform?.url"
+          />
+          <span>{{ element.Platform?.name }}</span>
+        </div>
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
 
-  <ng-container matColumnDef="value">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end px-1"
-      mat-header-cell
-      mat-sort-header
-    >
-      <ng-container i18n>Value</ng-container>
-    </th>
-    <td
-      *matCellDef="let element"
-      class="d-none d-lg-table-cell px-1 text-right"
-      mat-cell
-    >
-      <gf-value
-        class="d-inline-block justify-content-end"
-        [isCurrency]="true"
-        [locale]="locale"
-        [value]="element.value"
-      />
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
-      mat-footer-cell
-    >
-      <gf-value
-        class="d-inline-block justify-content-end"
-        [isCurrency]="true"
-        [locale]="locale"
-        [value]="totalValueInBaseCurrency"
-      />
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="transactions">
+      <th
+        *matHeaderCellDef
+        class="justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header="transactionCount"
+      >
+        <span class="d-block d-sm-none">#</span>
+        <span class="d-none d-sm-block" i18n>Activities</span>
+      </th>
+      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+        {{ element.transactionCount }}
+      </td>
+      <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+        {{ transactionCount }}
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="valueInBaseCurrency">
-    <th
-      *matHeaderCellDef
-      class="d-lg-none d-xl-none px-1 text-right"
-      mat-header-cell
-      mat-sort-header
-    >
-      <ng-container i18n>Value</ng-container>
-    </th>
-    <td
-      *matCellDef="let element"
-      class="d-lg-none d-xl-none px-1 text-right"
-      mat-cell
-    >
-      <gf-value
-        class="d-inline-block justify-content-end"
-        [isCurrency]="true"
-        [locale]="locale"
-        [value]="element.valueInBaseCurrency"
-      />
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-lg-none d-xl-none px-1 text-right"
-      mat-footer-cell
-    >
-      <gf-value
-        class="d-inline-block justify-content-end"
-        [isCurrency]="true"
-        [locale]="locale"
-        [value]="totalValueInBaseCurrency"
-      />
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="balance">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Cash Balance</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1 text-right"
+        mat-cell
+      >
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="element.balance"
+        />
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1 text-right"
+        mat-footer-cell
+      >
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="totalBalanceInBaseCurrency"
+        />
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="comment">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-header-cell
-    ></th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <button
-        *ngIf="element.comment"
-        class="mx-1 no-min-width px-2"
-        mat-button
-        title="Note"
-        (click)="onOpenComment(element.comment); $event.stopPropagation()"
+    <ng-container matColumnDef="value">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Value</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1 text-right"
+        mat-cell
       >
-        <ion-icon name="document-text-outline" />
-      </button>
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-footer-cell
-    ></td>
-  </ng-container>
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="element.value"
+        />
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1 text-right"
+        mat-footer-cell
+      >
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="totalValueInBaseCurrency"
+        />
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="actions" stickyEnd>
-    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
-    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-      <button
-        class="mx-1 no-min-width px-2"
-        mat-button
-        [matMenuTriggerFor]="accountMenu"
-        (click)="$event.stopPropagation()"
+    <ng-container matColumnDef="valueInBaseCurrency">
+      <th
+        *matHeaderCellDef
+        class="d-lg-none d-xl-none px-1 text-right"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Value</ng-container>
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-lg-none d-xl-none px-1 text-right"
+        mat-cell
       >
-        <ion-icon name="ellipsis-horizontal" />
-      </button>
-      <mat-menu #accountMenu="matMenu" xPosition="before">
-        <button mat-menu-item (click)="onUpdateAccount(element)">
-          <span class="align-items-center d-flex">
-            <ion-icon class="mr-2" name="create-outline" />
-            <span i18n>Edit</span>
-          </span>
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="element.valueInBaseCurrency"
+        />
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-lg-none d-xl-none px-1 text-right"
+        mat-footer-cell
+      >
+        <gf-value
+          class="d-inline-block justify-content-end"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="totalValueInBaseCurrency"
+        />
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="comment">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-header-cell
+      ></th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <button
+          *ngIf="element.comment"
+          class="mx-1 no-min-width px-2"
+          mat-button
+          title="Note"
+          (click)="onOpenComment(element.comment); $event.stopPropagation()"
+        >
+          <ion-icon name="document-text-outline" />
         </button>
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions" stickyEnd>
+      <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
         <button
-          mat-menu-item
-          [disabled]="element.transactionCount > 0"
-          (click)="onDeleteAccount(element.id)"
+          class="mx-1 no-min-width px-2"
+          mat-button
+          [matMenuTriggerFor]="accountMenu"
+          (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>
-    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-  </ng-container>
+        <mat-menu #accountMenu="matMenu" xPosition="before">
+          <button mat-menu-item (click)="onUpdateAccount(element)">
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="create-outline" />
+              <span i18n>Edit</span>
+            </span>
+          </button>
+          <button
+            mat-menu-item
+            [disabled]="element.transactionCount > 0"
+            (click)="onDeleteAccount(element.id)"
+          >
+            <span class="align-items-center d-flex">
+              <ion-icon class="mr-2" name="trash-outline" />
+              <span i18n>Delete</span>
+            </span>
+          </button>
+        </mat-menu>
+      </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+    </ng-container>
 
-  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr
-    *matRowDef="let row; columns: displayedColumns"
-    mat-row
-    [ngClass]="{
-      'cursor-pointer': hasPermissionToOpenDetails
-    }"
-    (click)="onOpenAccountDetailDialog(row.id)"
-  ></tr>
-  <tr
-    *matFooterRowDef="displayedColumns"
-    mat-footer-row
-    [ngClass]="{ 'd-none': isLoading || !showFooter }"
-  ></tr>
-</table>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr
+      *matRowDef="let row; columns: displayedColumns"
+      mat-row
+      [ngClass]="{
+        'cursor-pointer': hasPermissionToOpenDetails
+      }"
+      (click)="onOpenAccountDetailDialog(row.id)"
+    ></tr>
+    <tr
+      *matFooterRowDef="displayedColumns"
+      mat-footer-row
+      [ngClass]="{ 'd-none': isLoading || !showFooter }"
+    ></tr>
+  </table>
+</div>
 
 <ngx-skeleton-loader
   *ngIf="isLoading"
diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index b8eaa28ab..ae0deae92 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <div class="users">
+      <div class="overflow-x-auto">
         <table class="gf-table" mat-table [dataSource]="dataSource">
           <ng-container matColumnDef="index">
             <th
diff --git a/apps/client/src/app/components/admin-users/admin-users.scss b/apps/client/src/app/components/admin-users/admin-users.scss
index e4990bf59..f92b2d296 100644
--- a/apps/client/src/app/components/admin-users/admin-users.scss
+++ b/apps/client/src/app/components/admin-users/admin-users.scss
@@ -1,16 +1,12 @@
 :host {
   display: block;
 
-  .users {
-    overflow-x: auto;
+  .gf-table {
+    min-width: 100%;
 
-    table {
-      min-width: 100%;
-
-      .mat-mdc-row,
-      .mat-mdc-header-row {
-        width: 100%;
-      }
+    .mat-mdc-row,
+    .mat-mdc-header-row {
+      width: 100%;
     }
   }
 }
diff --git a/apps/client/src/app/components/user-account-access/user-account-access.scss b/apps/client/src/app/components/user-account-access/user-account-access.scss
index 695f786f2..39eb6792e 100644
--- a/apps/client/src/app/components/user-account-access/user-account-access.scss
+++ b/apps/client/src/app/components/user-account-access/user-account-access.scss
@@ -1,10 +1,6 @@
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
-
-  gf-access-table {
-    overflow-x: auto;
-  }
 }
 
 :host-context(.is-dark-theme) {
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index cffbe4251..d94dc4292 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -2,25 +2,23 @@
   <div class="row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Accounts</h1>
-      <div class="accounts">
-        <gf-accounts-table
-          [accounts]="accounts"
-          [baseCurrency]="user?.settings?.baseCurrency"
-          [deviceType]="deviceType"
-          [locale]="user?.settings?.locale"
-          [showActions]="
-            !hasImpersonationId &&
-            hasPermissionToUpdateAccount &&
-            !user.settings.isRestrictedView
-          "
-          [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
-          [totalValueInBaseCurrency]="totalValueInBaseCurrency"
-          [transactionCount]="transactionCount"
-          (accountDeleted)="onDeleteAccount($event)"
-          (accountToUpdate)="onUpdateAccount($event)"
-          (transferBalance)="onTransferBalance()"
-        />
-      </div>
+      <gf-accounts-table
+        [accounts]="accounts"
+        [baseCurrency]="user?.settings?.baseCurrency"
+        [deviceType]="deviceType"
+        [locale]="user?.settings?.locale"
+        [showActions]="
+          !hasImpersonationId &&
+          hasPermissionToUpdateAccount &&
+          !user.settings.isRestrictedView
+        "
+        [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
+        [totalValueInBaseCurrency]="totalValueInBaseCurrency"
+        [transactionCount]="transactionCount"
+        (accountDeleted)="onDeleteAccount($event)"
+        (accountToUpdate)="onUpdateAccount($event)"
+        (transferBalance)="onTransferBalance()"
+      />
     </div>
   </div>
 
diff --git a/apps/client/src/app/pages/accounts/accounts-page.scss b/apps/client/src/app/pages/accounts/accounts-page.scss
index 32e9fe146..5d4e87f30 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.scss
+++ b/apps/client/src/app/pages/accounts/accounts-page.scss
@@ -1,7 +1,3 @@
 :host {
   display: block;
-
-  .accounts {
-    overflow-x: auto;
-  }
 }
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index ce18789b2..9d548f1ff 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -509,6 +509,10 @@ ngx-skeleton-loader {
   min-width: unset !important;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .page {
   display: flex;
   flex-direction: column;
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 68950a0c0..679f44790 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -70,7 +70,7 @@
   </div>
 }
 
-<div class="activities">
+<div class="overflow-x-auto">
   <table
     class="gf-table w-100"
     mat-table
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.scss b/libs/ui/src/lib/activities-table/activities-table.component.scss
index bb5e11691..5d4e87f30 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.scss
+++ b/libs/ui/src/lib/activities-table/activities-table.component.scss
@@ -1,7 +1,3 @@
 :host {
   display: block;
-
-  .activities {
-    overflow-x: auto;
-  }
 }
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index 2aa01580d..5e4526fdc 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@@ -1,4 +1,4 @@
-<div class="holdings">
+<div class="overflow-x-auto">
   <table
     class="gf-table w-100"
     mat-table
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.scss b/libs/ui/src/lib/holdings-table/holdings-table.component.scss
index 89d62d59d..990b8b294 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.scss
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.scss
@@ -1,15 +1,11 @@
 :host {
   display: block;
 
-  .holdings {
-    overflow-x: auto;
-
-    .gf-table {
-      th {
-        ::ng-deep {
-          .mat-sort-header-container {
-            justify-content: inherit;
-          }
+  .gf-table {
+    th {
+      ::ng-deep {
+        .mat-sort-header-container {
+          justify-content: inherit;
         }
       }
     }
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index ec95bddcb..9c5aba16d 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -1,64 +1,66 @@
-<table
-  class="gf-table w-100"
-  mat-table
-  matSort
-  matSortActive="allocationInPercentage"
-  matSortDirection="desc"
-  [dataSource]="dataSource"
->
-  <ng-container matColumnDef="name">
-    <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
-      <ng-container i18n>Name</ng-container>
-    </th>
-    <td *matCellDef="let element" class="px-2" mat-cell>
-      {{ element?.name | titlecase }}
-    </td>
-  </ng-container>
+<div class="overflow-x-auto">
+  <table
+    class="gf-table w-100"
+    mat-table
+    matSort
+    matSortActive="allocationInPercentage"
+    matSortDirection="desc"
+    [dataSource]="dataSource"
+  >
+    <ng-container matColumnDef="name">
+      <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
+        <ng-container i18n>Name</ng-container>
+      </th>
+      <td *matCellDef="let element" class="px-2" mat-cell>
+        <div class="text-truncate">{{ element?.name | titlecase }}</div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="valueInBaseCurrency">
-    <th
-      *matHeaderCellDef
-      class="justify-content-end px-2"
-      mat-header-cell
-      mat-sort-header
-    >
-      <ng-container i18n>Value</ng-container>
-    </th>
-    <td *matCellDef="let element" class="px-2" mat-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="element?.valueInBaseCurrency"
-        />
-      </div>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="valueInBaseCurrency">
+      <th
+        *matHeaderCellDef
+        class="justify-content-end px-2"
+        mat-header-cell
+        mat-sort-header
+      >
+        <ng-container i18n>Value</ng-container>
+      </th>
+      <td *matCellDef="let element" class="px-2" mat-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="element?.valueInBaseCurrency"
+          />
+        </div>
+      </td>
+    </ng-container>
 
-  <ng-container matColumnDef="allocationInPercentage">
-    <th
-      *matHeaderCellDef
-      class="justify-content-end px-2"
-      mat-header-cell
-      mat-sort-header
-    >
-      <span class="d-none d-sm-block" i18n>Allocation</span>
-      <span class="d-block d-sm-none" title="Allocation">%</span>
-    </th>
-    <td *matCellDef="let element" class="px-2" mat-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isPercent]="true"
-          [locale]="locale"
-          [value]="element?.allocationInPercentage"
-        />
-      </div>
-    </td>
-  </ng-container>
+    <ng-container matColumnDef="allocationInPercentage" stickyEnd>
+      <th
+        *matHeaderCellDef
+        class="justify-content-end px-2"
+        mat-header-cell
+        mat-sort-header
+      >
+        <span class="d-none d-sm-block" i18n>Allocation</span>
+        <span class="d-block d-sm-none" title="Allocation">%</span>
+      </th>
+      <td *matCellDef="let element" class="px-2" mat-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isPercent]="true"
+            [locale]="locale"
+            [value]="element?.allocationInPercentage"
+          />
+        </div>
+      </td>
+    </ng-container>
 
-  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  </table>
+</div>
 
 <mat-paginator class="d-none" [pageSize]="pageSize" />