From cdb8dc72c773c6465623776b284cd93c8e037e4d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 18 May 2023 22:36:30 +0200
Subject: [PATCH] Feature/improve mobile layout of portfolio summary (#1982)

* Improve layout for mobile

* Update changelog
---
 CHANGELOG.md                                  |   1 +
 .../portfolio-summary.component.html          | 100 +++++++++---------
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3cffdb0fd..c7b74a445 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the mobile layout of the portfolio summary tab on the home page
 - Improved the language localization for German (`de`)
 
 ### Fixed
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
index 14a21813c..0b0077dea 100644
--- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
+++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
@@ -1,16 +1,16 @@
 <div class="container p-0">
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Time in Market</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
+    <div class="justify-content-end">
       <gf-value class="justify-content-end" [value]="timeInMarket"></gf-value>
     </div>
   </div>
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Buy</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Buy</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -19,9 +19,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Sell</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Sell</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -33,9 +33,9 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Investment</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Investment</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -44,9 +44,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Absolute Gross Performance</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Absolute Gross Performance</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -55,9 +55,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1 ml-3" i18n>Gross Performance (TWR)</div>
-    <div class="d-flex flex-column flex-wrap justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 ml-3 text-truncate" i18n>Gross Performance</div>
+    <div class="flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end"
         position="end"
@@ -70,8 +70,8 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>
       Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1
       {transaction} other {transactions}}
     </div>
@@ -88,9 +88,9 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Absolute Net Performance</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Absolute Net Performance</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -99,9 +99,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1 ml-3" i18n>Net Performance (TWR)</div>
-    <div class="d-flex flex-column flex-wrap justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate ml-3" i18n>Net Performance</div>
+    <div class="flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end"
         position="end"
@@ -115,9 +115,9 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Total Assets</div>
-    <div class="d-flex flex-column flex-wrap justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Total Assets</div>
+    <div class="flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end"
         position="end"
@@ -127,9 +127,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Valuables</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Valuables</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -138,8 +138,8 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Emergency Fund</div>
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
     <div
       class="align-items-center d-flex justify-content-end"
       [ngClass]="{ 'cursor-pointer': hasPermissionToUpdateUserSettings }"
@@ -158,9 +158,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Buying Power</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Buying Power</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -169,9 +169,9 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Excluded from Analysis</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Excluded from Analysis</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -183,9 +183,9 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1 font-weight-bold" i18n>Net Worth</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"
@@ -194,9 +194,11 @@
       ></gf-value>
     </div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1 ml-3" i18n>Annualized Performance</div>
-    <div class="d-flex flex-column flex-wrap justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 ml-3 text-truncate" i18n>
+      Annualized Performance
+    </div>
+    <div class="flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end"
         position="end"
@@ -210,9 +212,9 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Dividend</div>
-    <div class="d-flex justify-content-end">
+  <div class="flex-nowrap px-3 py-1 row">
+    <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
+    <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"