Feature/improve allocations by ETF holding for mobile (#3469)

apps/client/src/app/components/access-table/access-table.component.html

@@ -1,4 +1,5 @@
-<table class="gf-table w-100" mat-table [dataSource]="dataSource">
+<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>
@@ -31,7 +32,10 @@
     <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
+          *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 }}"
@@ -64,4 +68,5 @@
 
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
     <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+  </table>
+</div>

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -10,14 +10,19 @@
   </button>
 </div>
 
-<table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
+<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>
+      <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>
@@ -54,7 +59,11 @@
       >
         <ng-container i18n>Currency</ng-container>
       </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
+      <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>
@@ -71,7 +80,11 @@
       >
         <ng-container i18n>Platform</ng-container>
       </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
+      <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"
@@ -218,7 +231,11 @@
         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>
+      <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"
@@ -283,7 +300,8 @@
       mat-footer-row
       [ngClass]="{ 'd-none': isLoading || !showFooter }"
     ></tr>
-</table>
+  </table>
+</div>
 
 <ngx-skeleton-loader
   *ngIf="isLoading"

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

apps/client/src/app/components/admin-users/admin-users.scss

@@ -1,10 +1,7 @@
 :host {
   display: block;
 
-  .users {
-    overflow-x: auto;
-
-    table {
+  .gf-table {
     min-width: 100%;
 
     .mat-mdc-row,
@@ -12,5 +9,4 @@
       width: 100%;
     }
   }
-  }
 }

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) {

apps/client/src/app/pages/accounts/accounts-page.html

@@ -2,7 +2,6 @@
   <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"
@@ -22,7 +21,6 @@
       />
     </div>
   </div>
-  </div>
 
   <div
     *ngIf="

apps/client/src/app/pages/accounts/accounts-page.scss

@@ -1,7 +1,3 @@
 :host {
   display: block;
-
-  .accounts {
-    overflow-x: auto;
-  }
 }

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;

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

libs/ui/src/lib/activities-table/activities-table.component.scss

@@ -1,7 +1,3 @@
 :host {
   display: block;
-
-  .activities {
-    overflow-x: auto;
-  }
 }

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

libs/ui/src/lib/holdings-table/holdings-table.component.scss

@@ -1,9 +1,6 @@
 :host {
   display: block;
 
-  .holdings {
-    overflow-x: auto;
-
   .gf-table {
     th {
       ::ng-deep {
@@ -13,5 +10,4 @@
       }
     }
   }
-  }
 }

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -1,17 +1,18 @@
-<table
+<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>
-      {{ element?.name | titlecase }}
+        <div class="text-truncate">{{ element?.name | titlecase }}</div>
       </td>
     </ng-container>
 
@@ -35,7 +36,7 @@
       </td>
     </ng-container>
 
-  <ng-container matColumnDef="allocationInPercentage">
+    <ng-container matColumnDef="allocationInPercentage" stickyEnd>
       <th
         *matHeaderCellDef
         class="justify-content-end px-2"
@@ -58,7 +59,8 @@
 
     <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
     <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-</table>
+  </table>
+</div>
 
 <mat-paginator class="d-none" [pageSize]="pageSize" />