From 165ca94f5b4d8871375e758b9af779ee03534443 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 14 Jan 2024 17:05:42 +0100
Subject: [PATCH] Feature/improve alignment in portfolio performance component
 (#2867)

* Improve alignment

* Update changelog
---
 CHANGELOG.md                                  |  4 ++++
 .../portfolio-performance.component.html      | 24 ++++++++++---------
 .../portfolio-performance.component.scss      | 12 +++++++++-
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9bde0c960..3691a51f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Improved the alignment in the portfolio performance chart
+
 ### Fixed
 
 - Fixed the currency in the error log of the exchange rate data service
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
index 1a931f666..652d30b63 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html
@@ -1,15 +1,17 @@
 <div class="container p-0">
   <div class="no-gutters row">
-    @if (errors?.length > 0 && !isLoading) {
-      <div
-        class="flex-grow-1 status text-muted text-right"
-        i18n-title
-        title="Oops! Our data provider partner is experiencing the hiccups."
-        (click)="onShowErrors()"
-      >
-        <ion-icon name="time-outline" />
-      </div>
-    }
+    <div
+      class="status-container text-muted text-right"
+      (click)="onShowErrors()"
+    >
+      @if (errors?.length > 0 && !isLoading) {
+        <ion-icon
+          i18n-title
+          name="time-outline"
+          title="Oops! Our data provider partner is experiencing the hiccups."
+        />
+      }
+    </div>
     <div *ngIf="isLoading" class="align-items-center d-flex">
       <ngx-skeleton-loader
         animation="pulse"
@@ -30,7 +32,7 @@
     >
       <span #value id="value"></span>
     </div>
-    <div class="flex-grow-1 px-1">
+    <div class="currency-container flex-grow-1 px-1">
       {{ unit }}
     </div>
   </div>
diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss
index 398a2981a..6f703255f 100644
--- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss
+++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss
@@ -1,8 +1,18 @@
 :host {
   display: block;
 
-  .status {
+  .currency-container,
+  .status-container {
+    flex: 1;
+    min-width: 2.5rem;
+  }
+
+  .status-container {
     font-size: 1.33rem;
+
+    ion-icon {
+      pointer-events: all;
+    }
   }
 
   .value-container {