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,7 +1,8 @@
 <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>
+      <div class="accounts">
         <gf-accounts-table
           [accounts]="accounts"
           [baseCurrency]="user?.settings?.baseCurrency"
@@ -16,6 +17,7 @@
         ></gf-accounts-table>
       </div>
     </div>
+  </div>
 
   <div
     *ngIf="!hasImpersonationId && hasPermissionToCreateAccount && !user.settings.isRestrictedView"

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,14 +36,15 @@
   </mat-autocomplete>
 </mat-form-field>
 
-<table
+<div class="activities">
+  <table
     class="gf-table w-100"
     matSort
     matSortActive="date"
     matSortDirection="desc"
     mat-table
     [dataSource]="dataSource"
->
+  >
     <ng-container matColumnDef="count">
       <th
         *matHeaderCellDef
@@ -127,7 +128,11 @@
       >
         Currency
       </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>
@@ -145,7 +150,11 @@
       >
         Quantity
       </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-end">
           <gf-value
             [isCurrency]="true"
@@ -171,7 +180,11 @@
       >
         Unit Price
       </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-end">
           <gf-value
             [isCurrency]="true"
@@ -197,7 +210,11 @@
       >
         Fee
       </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-end">
           <gf-value
             [isCurrency]="true"
@@ -336,14 +353,17 @@
             symbol: row.symbol
           })
       "
-    [ngClass]="{ 'cursor-pointer': hasPermissionToOpenDetails && !row.isDraft }"
+      [ngClass]="{
+        'cursor-pointer': hasPermissionToOpenDetails && !row.isDraft
+      }"
     ></tr>
     <tr
       *matFooterRowDef="displayedColumns"
       mat-footer-row
       [ngClass]="{ 'd-none': isLoading || dataSource.data.length === 0 }"
     ></tr>
-</table>
+  </table>
+</div>
 
 <ngx-skeleton-loader
   *ngIf="isLoading"

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

@@ -14,6 +14,9 @@
     min-height: 1.5rem !important;
   }
 
+  .activities {
+    overflow-x: auto;
+
     .mat-table {
       td {
         &.mat-footer-cell {
@@ -57,6 +60,7 @@
         }
       }
     }
+  }
 }
 
 :host-context(.is-dark-theme) {