Bugfix/fix horizontal overflow in activities table (#676)

* Fix horizontal overflow in tables

* Update changelog

CHANGELOG.md

@@ -17,6 +17,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removed the _Admin_ user from the database seeding
 - Assigned the role `ADMIN` on sign up (only if there is no admin yet)
 
+### Fixed
+
+- Fixed the horizontal overflow in the accounts table
+- Fixed the horizontal overflow in the activities table
+
 ### Todo
 
 - Apply data migration (`yarn database:migrate`)

apps/client/src/app/pages/about/about-page.component.ts

@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-about-page',
   styleUrls: ['./about-page.scss'],
   templateUrl: './about-page.html'

apps/client/src/app/pages/about/changelog/changelog-page.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-changelog-page',
   styleUrls: ['./changelog-page.scss'],
   templateUrl: './changelog-page.html'

apps/client/src/app/pages/account/account-page.component.ts

@@ -31,7 +31,7 @@ import { catchError, switchMap, takeUntil } from 'rxjs/operators';
 import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/create-or-update-access-dialog.component';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-account-page',
   styleUrls: ['./account-page.scss'],
   templateUrl: './account-page.html'

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -16,7 +16,7 @@ import { takeUntil } from 'rxjs/operators';
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/create-or-update-account-dialog.component';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-accounts-page',
   styleUrls: ['./accounts-page.scss'],
   templateUrl: './accounts-page.html'

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

@@ -1,19 +1,21 @@
 <div class="container">
-  <div class="row mb-3">
+  <div class="row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>Accounts</h3>
-      <gf-accounts-table
-        [accounts]="accounts"
-        [baseCurrency]="user?.settings?.baseCurrency"
-        [deviceType]="deviceType"
-        [locale]="user?.settings?.locale"
-        [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
-        [totalBalance]="totalBalance"
-        [totalValue]="totalValue"
-        [transactionCount]="transactionCount"
-        (accountDeleted)="onDeleteAccount($event)"
-        (accountToUpdate)="onUpdateAccount($event)"
-      ></gf-accounts-table>
+      <div class="accounts">
+        <gf-accounts-table
+          [accounts]="accounts"
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="deviceType"
+          [locale]="user?.settings?.locale"
+          [showActions]="!hasImpersonationId && hasPermissionToDeleteAccount && !user.settings.isRestrictedView"
+          [totalBalance]="totalBalance"
+          [totalValue]="totalValue"
+          [transactionCount]="transactionCount"
+          (accountDeleted)="onDeleteAccount($event)"
+          (accountToUpdate)="onUpdateAccount($event)"
+        ></gf-accounts-table>
+      </div>
     </div>
   </div>
 

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

@@ -1,6 +1,10 @@
 :host {
   display: block;
 
+  .accounts {
+    overflow-x: auto;
+  }
+
   .fab-container {
     position: fixed;
     right: 2rem;

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-hallo-ghostfolio-page',
   styleUrls: ['./hallo-ghostfolio-page.scss'],
   templateUrl: './hallo-ghostfolio-page.html'

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-hello-ghostfolio-page',
   styleUrls: ['./hello-ghostfolio-page.scss'],
   templateUrl: './hello-ghostfolio-page.html'

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-first-months-in-open-source-page',
   styleUrls: ['./first-months-in-open-source-page.scss'],
   templateUrl: './first-months-in-open-source-page.html'

apps/client/src/app/pages/blog/blog-page.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-blog-page',
   styleUrls: ['./blog-page.scss'],
   templateUrl: './blog-page.html'

apps/client/src/app/pages/landing/landing-page.component.ts

@@ -6,7 +6,7 @@ import { format } from 'date-fns';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-landing-page',
   styleUrls: ['./landing-page.scss'],
   templateUrl: './landing-page.html'

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -20,7 +20,7 @@ import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-allocations-page',
   styleUrls: ['./allocations-page.scss'],
   templateUrl: './allocations-page.html'

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -11,7 +11,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-analysis-page',
   styleUrls: ['./analysis-page.scss'],
   templateUrl: './analysis-page.html'

apps/client/src/app/pages/portfolio/portfolio-page.component.ts

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-portfolio-page',
   styleUrls: ['./portfolio-page.scss'],
   templateUrl: './portfolio-page.html'

apps/client/src/app/pages/portfolio/report/report-page.component.ts

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-report-page',
   styleUrls: ['./report-page.scss'],
   templateUrl: './report-page.html'

apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts

@@ -24,7 +24,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
 import { ImportTransactionDialog } from './import-transaction-dialog/import-transaction-dialog.component';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-transactions-page',
   styleUrls: ['./transactions-page.scss'],
   templateUrl: './transactions-page.html'

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -7,7 +7,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-pricing-page',
   styleUrls: ['./pricing-page.scss'],
   templateUrl: './pricing-page.html'

apps/client/src/app/pages/public/public-page.component.ts

@@ -13,7 +13,7 @@ import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-public-page',
   styleUrls: ['./public-page.scss'],
   templateUrl: './public-page.html'

apps/client/src/app/pages/register/register-page.component.ts

@@ -14,7 +14,7 @@ import { takeUntil } from 'rxjs/operators';
 import { ShowAccessTokenDialog } from './show-access-token-dialog/show-access-token-dialog.component';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-register-page',
   styleUrls: ['./register-page.scss'],
   templateUrl: './register-page.html'

apps/client/src/app/pages/resources/resources-page.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-resources-page',
   styleUrls: ['./resources-page.scss'],
   templateUrl: './resources-page.html'

apps/client/src/app/pages/webauthn/webauthn-page.component.ts

@@ -6,7 +6,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'mb-5' },
+  host: { class: 'page' },
   selector: 'gf-webauthn-page',
   styleUrls: ['./webauthn-page.scss'],
   templateUrl: './webauthn-page.html'

apps/client/src/styles.scss

@@ -164,6 +164,10 @@ ngx-skeleton-loader {
   min-width: unset !important;
 }
 
+.page {
+  padding-bottom: 5rem;
+}
+
 .svgMap-tooltip {
   border-bottom: none;
 

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

@@ -36,314 +36,334 @@
   </mat-autocomplete>
 </mat-form-field>
 
-<table
-  class="gf-table w-100"
-  matSort
-  matSortActive="date"
-  matSortDirection="desc"
-  mat-table
-  [dataSource]="dataSource"
->
-  <ng-container matColumnDef="count">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
-      i18n
-      mat-header-cell
-    ></th>
-    <td
-      *matCellDef="let element; let i = index"
-      class="d-none d-lg-table-cell px-1 text-right"
-      mat-cell
-    >
-      {{ dataSource.data.length - i }}
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-footer-cell
-    ></td>
-  </ng-container>
-  <ng-container matColumnDef="date">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-      Date
-    </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      <div class="d-flex">
-        {{ element.date | date: defaultDateFormat }}
-      </div>
-    </td>
-    <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
-  </ng-container>
-
-  <ng-container matColumnDef="type">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-      Type
-    </th>
-    <td *matCellDef="let element" mat-cell class="px-1">
-      <div
-        class="d-inline-flex p-1 type-badge"
-        [ngClass]="{
-          buy: element.type === 'BUY',
-          dividend: element.type === 'DIVIDEND',
-          sell: element.type === 'SELL'
-        }"
+<div class="activities">
+  <table
+    class="gf-table w-100"
+    matSort
+    matSortActive="date"
+    matSortDirection="desc"
+    mat-table
+    [dataSource]="dataSource"
+  >
+    <ng-container matColumnDef="count">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-1 text-right"
+        i18n
+        mat-header-cell
+      ></th>
+      <td
+        *matCellDef="let element; let i = index"
+        class="d-none d-lg-table-cell px-1 text-right"
+        mat-cell
       >
-        <ion-icon
-          [name]="
-            element.type === 'BUY' || element.type === 'DIVIDEND'
-              ? 'arrow-forward-circle-outline'
-              : 'arrow-back-circle-outline'
+        {{ dataSource.data.length - i }}
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
+    <ng-container matColumnDef="date">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+        Date
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <div class="d-flex">
+          {{ element.date | date: defaultDateFormat }}
+        </div>
+      </td>
+      <td *matFooterCellDef class="px-1" i18n mat-footer-cell>Total</td>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+        Type
+      </th>
+      <td *matCellDef="let element" mat-cell class="px-1">
+        <div
+          class="d-inline-flex p-1 type-badge"
+          [ngClass]="{
+            buy: element.type === 'BUY',
+            dividend: element.type === 'DIVIDEND',
+            sell: element.type === 'SELL'
+          }"
+        >
+          <ion-icon
+            [name]="
+              element.type === 'BUY' || element.type === 'DIVIDEND'
+                ? 'arrow-forward-circle-outline'
+                : 'arrow-back-circle-outline'
+            "
+          ></ion-icon>
+          <span class="d-none d-lg-block mx-1">{{ element.type }}</span>
+        </div>
+      </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+    </ng-container>
+
+    <ng-container matColumnDef="symbol">
+      <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
+        Symbol
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <div class="d-flex align-items-center">
+          {{ element.symbol | gfSymbol }}
+          <span *ngIf="element.isDraft" class="badge badge-secondary ml-1" i18n
+            >Draft</span
+          >
+        </div>
+      </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+    </ng-container>
+
+    <ng-container matColumnDef="currency">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell px-1"
+        i18n
+        mat-header-cell
+        mat-sort-header
+      >
+        Currency
+      </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="quantity">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        i18n
+        mat-header-cell
+        mat-sort-header
+      >
+        Quantity
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.quantity"
+          ></gf-value>
+        </div>
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
+
+    <ng-container matColumnDef="unitPrice">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        i18n
+        mat-header-cell
+        mat-sort-header
+      >
+        Unit Price
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.unitPrice"
+          ></gf-value>
+        </div>
+      </td>
+      <td
+        *matFooterCellDef
+        class="d-none d-lg-table-cell px-1"
+        mat-footer-cell
+      ></td>
+    </ng-container>
+
+    <ng-container matColumnDef="fee">
+      <th
+        *matHeaderCellDef
+        class="d-none d-lg-table-cell justify-content-end px-1"
+        i18n
+        mat-header-cell
+        mat-sort-header
+      >
+        Fee
+      </th>
+      <td
+        *matCellDef="let element"
+        class="d-none d-lg-table-cell px-1"
+        mat-cell
+      >
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.fee"
+          ></gf-value>
+        </div>
+      </td>
+      <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : totalFees"
+          ></gf-value>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="value">
+      <th
+        *matHeaderCellDef
+        class="justify-content-end px-1"
+        i18n
+        mat-header-cell
+        mat-sort-header
+      >
+        Value
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.value"
+          ></gf-value>
+        </div>
+      </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell>
+        <div class="d-flex justify-content-end">
+          <gf-value
+            [isCurrency]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : totalValue"
+          ></gf-value>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="account">
+      <th *matHeaderCellDef class="px-1" mat-header-cell>
+        <span class="d-none d-lg-block" i18n>Account</span>
+      </th>
+      <td *matCellDef="let element" class="px-1" mat-cell>
+        <div class="d-flex">
+          <gf-symbol-icon
+            *ngIf="element.Account?.Platform?.url"
+            class="mr-1"
+            [tooltip]="element.Account?.Platform?.name"
+            [url]="element.Account?.Platform?.url"
+          ></gf-symbol-icon>
+          <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
+        </div>
+      </td>
+      <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
+        <button
+          *ngIf="
+            hasPermissionToExportActivities || hasPermissionToImportActivities
           "
-        ></ion-icon>
-        <span class="d-none d-lg-block mx-1">{{ element.type }}</span>
-      </div>
-    </td>
-    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-  </ng-container>
-
-  <ng-container matColumnDef="symbol">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
-      Symbol
-    </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      <div class="d-flex align-items-center">
-        {{ element.symbol | gfSymbol }}
-        <span *ngIf="element.isDraft" class="badge badge-secondary ml-1" i18n
-          >Draft</span
+          class="mx-1 no-min-width px-2"
+          mat-button
+          [matMenuTriggerFor]="activitiesMenu"
+          (click)="$event.stopPropagation()"
         >
-      </div>
-    </td>
-    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-  </ng-container>
-
-  <ng-container matColumnDef="currency">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Currency
-    </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="quantity">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Quantity
-    </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.quantity"
-        ></gf-value>
-      </div>
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-footer-cell
-    ></td>
-  </ng-container>
-
-  <ng-container matColumnDef="unitPrice">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Unit Price
-    </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.unitPrice"
-        ></gf-value>
-      </div>
-    </td>
-    <td
-      *matFooterCellDef
-      class="d-none d-lg-table-cell px-1"
-      mat-footer-cell
-    ></td>
-  </ng-container>
-
-  <ng-container matColumnDef="fee">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Fee
-    </th>
-    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.fee"
-        ></gf-value>
-      </div>
-    </td>
-    <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : totalFees"
-        ></gf-value>
-      </div>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="value">
-    <th
-      *matHeaderCellDef
-      class="justify-content-end px-1"
-      i18n
-      mat-header-cell
-      mat-sort-header
-    >
-      Value
-    </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.value"
-        ></gf-value>
-      </div>
-    </td>
-    <td *matFooterCellDef class="px-1" mat-footer-cell>
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : totalValue"
-        ></gf-value>
-      </div>
-    </td>
-  </ng-container>
-
-  <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" mat-header-cell>
-      <span class="d-none d-lg-block" i18n>Account</span>
-    </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
-      <div class="d-flex">
-        <gf-symbol-icon
-          *ngIf="element.Account?.Platform?.url"
-          class="mr-1"
-          [tooltip]="element.Account?.Platform?.name"
-          [url]="element.Account?.Platform?.url"
-        ></gf-symbol-icon>
-        <span class="d-none d-lg-block">{{ element.Account?.name }}</span>
-      </div>
-    </td>
-    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-  </ng-container>
-
-  <ng-container matColumnDef="actions">
-    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
-      <button
-        *ngIf="
-          hasPermissionToExportActivities || hasPermissionToImportActivities
-        "
-        class="mx-1 no-min-width px-2"
-        mat-button
-        [matMenuTriggerFor]="activitiesMenu"
-        (click)="$event.stopPropagation()"
-      >
-        <ion-icon name="ellipsis-vertical"></ion-icon>
-      </button>
-      <mat-menu #activitiesMenu="matMenu" xPosition="before">
+          <ion-icon name="ellipsis-vertical"></ion-icon>
+        </button>
+        <mat-menu #activitiesMenu="matMenu" xPosition="before">
+          <button
+            *ngIf="hasPermissionToImportActivities"
+            class="align-items-center d-flex"
+            mat-menu-item
+            (click)="onImport()"
+          >
+            <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+            <span i18n>Import</span>
+          </button>
+          <button
+            *ngIf="hasPermissionToExportActivities"
+            class="align-items-center d-flex"
+            mat-menu-item
+            (click)="onExport()"
+          >
+            <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
+            <span i18n>Export</span>
+          </button>
+        </mat-menu>
+      </th>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
         <button
-          *ngIf="hasPermissionToImportActivities"
-          class="align-items-center d-flex"
-          mat-menu-item
-          (click)="onImport()"
+          *ngIf="this.showActions"
+          class="mx-1 no-min-width px-2"
+          mat-button
+          [matMenuTriggerFor]="activityMenu"
+          (click)="$event.stopPropagation()"
         >
-          <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
-          <span i18n>Import</span>
+          <ion-icon name="ellipsis-vertical"></ion-icon>
         </button>
-        <button
-          *ngIf="hasPermissionToExportActivities"
-          class="align-items-center d-flex"
-          mat-menu-item
-          (click)="onExport()"
-        >
-          <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
-          <span i18n>Export</span>
-        </button>
-      </mat-menu>
-    </th>
-    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-      <button
-        *ngIf="this.showActions"
-        class="mx-1 no-min-width px-2"
-        mat-button
-        [matMenuTriggerFor]="activityMenu"
-        (click)="$event.stopPropagation()"
-      >
-        <ion-icon name="ellipsis-vertical"></ion-icon>
-      </button>
-      <mat-menu #activityMenu="matMenu" xPosition="before">
-        <button i18n mat-menu-item (click)="onUpdateActivity(element)">
-          Edit
-        </button>
-        <button i18n mat-menu-item (click)="onCloneActivity(element)">
-          Clone
-        </button>
-        <button i18n mat-menu-item (click)="onDeleteActivity(element.id)">
-          Delete
-        </button>
-      </mat-menu>
-    </td>
-    <td *matFooterCellDef class="px-1" mat-footer-cell></td>
-  </ng-container>
+        <mat-menu #activityMenu="matMenu" xPosition="before">
+          <button i18n mat-menu-item (click)="onUpdateActivity(element)">
+            Edit
+          </button>
+          <button i18n mat-menu-item (click)="onCloneActivity(element)">
+            Clone
+          </button>
+          <button i18n mat-menu-item (click)="onDeleteActivity(element.id)">
+            Delete
+          </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
-    (click)="
-      hasPermissionToOpenDetails &&
-        !row.isDraft &&
-        onOpenPositionDialog({
-          dataSource: row.dataSource,
-          symbol: row.symbol
-        })
-    "
-    [ngClass]="{ 'cursor-pointer': hasPermissionToOpenDetails && !row.isDraft }"
-  ></tr>
-  <tr
-    *matFooterRowDef="displayedColumns"
-    mat-footer-row
-    [ngClass]="{ 'd-none': isLoading || dataSource.data.length === 0 }"
-  ></tr>
-</table>
+    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr
+      *matRowDef="let row; columns: displayedColumns"
+      mat-row
+      (click)="
+        hasPermissionToOpenDetails &&
+          !row.isDraft &&
+          onOpenPositionDialog({
+            dataSource: row.dataSource,
+            symbol: row.symbol
+          })
+      "
+      [ngClass]="{
+        'cursor-pointer': hasPermissionToOpenDetails && !row.isDraft
+      }"
+    ></tr>
+    <tr
+      *matFooterRowDef="displayedColumns"
+      mat-footer-row
+      [ngClass]="{ 'd-none': isLoading || dataSource.data.length === 0 }"
+    ></tr>
+  </table>
+</div>
 
 <ngx-skeleton-loader
   *ngIf="isLoading"

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

@@ -14,45 +14,49 @@
     min-height: 1.5rem !important;
   }
 
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top: 1px solid
-          rgba(
-            var(--palette-foreground-divider),
-            var(--palette-foreground-divider-alpha)
-          );
-      }
-    }
+  .activities {
+    overflow-x: auto;
 
-    th {
-      ::ng-deep {
-        .mat-sort-header-container {
-          justify-content: inherit;
+    .mat-table {
+      td {
+        &.mat-footer-cell {
+          border-top: 1px solid
+            rgba(
+              var(--palette-foreground-divider),
+              var(--palette-foreground-divider-alpha)
+            );
         }
       }
-    }
 
-    .mat-row {
-      .type-badge {
-        background-color: rgba(var(--palette-foreground-text), 0.05);
-        border-radius: 1rem;
-        line-height: 1em;
-
-        ion-icon {
-          font-size: 1rem;
+      th {
+        ::ng-deep {
+          .mat-sort-header-container {
+            justify-content: inherit;
+          }
         }
+      }
 
-        &.buy {
-          color: var(--green);
-        }
+      .mat-row {
+        .type-badge {
+          background-color: rgba(var(--palette-foreground-text), 0.05);
+          border-radius: 1rem;
+          line-height: 1em;
 
-        &.dividend {
-          color: var(--blue);
-        }
+          ion-icon {
+            font-size: 1rem;
+          }
 
-        &.sell {
-          color: var(--orange);
+          &.buy {
+            color: var(--green);
+          }
+
+          &.dividend {
+            color: var(--blue);
+          }
+
+          &.sell {
+            color: var(--orange);
+          }
         }
       }
     }