From 6d5a18be4ec71fe661ff21d605472f13d07d72b5 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 14 Jan 2024 09:03:09 +0100
Subject: [PATCH] Improve alignment

---
 .../portfolio-performance.component.html      | 24 ++++++++++---------
 .../portfolio-performance.component.scss      | 12 +++++++++-
 2 files changed, 24 insertions(+), 12 deletions(-)

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 {