Feature/improve alignment in portfolio performance component (#2867)

* Improve alignment

* Update changelog

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

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."
+      class="status-container text-muted text-right"
       (click)="onShowErrors()"
     >
-        <ion-icon name="time-outline" />
-      </div>
+      @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>

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 {